Pure CSS3 code implements multiple elements to display sequentially

This time to bring you a pure CSS3 code implementation of a number of elements in turn, the pure CSS3 code to implement a number of elements in turn to show the attention of the matter, the following is the actual case, together to see.

As shown, it is often necessary to use such an animation effect in many campaign HTML5. Especially near the end of the year, perhaps some students are busy for the company's activities page, get to such a small skill might just be helpful to you oh.

In CSS3, we use animation with keyframes to add a variety of animation effects to the elements. Specific animations, defined in keyframes, are used in animation. For example, you can define an animated effect that flies in from the top.

@keyframes Topin {from  {Transform:translatey ( -50px)} to  {Transform:translatey (0px)}}

and use the animation to animate in the target element.

<p class= "Target Topin" ></p>.topin {  animation:topin 1s ease;}

This way, when the element is first rendered into the DOM, there is a motion animation effect from top to bottom. Of course, this effect is not what we want. Often we also add a gradient with a transparency from 0 to 1 on the animation.

@keyframes Topin {from  {     transform:translatey ( -50px);    opacity:0;   }  to {     transform:translatey (0px);    opacity:1;}   }

We also want to be able to control the timing of the element's display. The simple way to do this is to add the class style that controls the animation to the target element when an animation effect is needed.

Btn.addeventlistener (' click ', Function () {  document.queryselector ('. Target '). Classlist.add (' Topin ');},! 1);

But there is a problem with this. I believe that the friends who have practiced have already discovered. We expect the elements to be in an invisible state before they enter the market. But just above, the elements can be seen before the animation begins. So what should we do?

We can simply think of adding display:none or Visibility:hidden to the element. However, since Display:none, the elements are not placeholder. So if this is the case, the page layout is confusing. So before we start, we add a new class to the element.

. aninode {  Visibility:hidden;}

and add a new class to let the elements show up.

. animated. Aninode {  visibility:visible;}

The class that controls the animation effect also makes some adjustments on the CSS.

. animated. topin {  animation:topin 1s ease;}

The advantage of this is that we only need to add a animated to the class to achieve our results. Example demo complete code is as follows:

<p class= "Container" > <p class= "target aninode leftin" ></p> <button class= "btn Show" >show</  button> <button class= "btn Hide" >hide</button></p>.container {width:100px; margin:0 Auto;}. Aninode {Visibility:hidden;}. Animated. Aninode {visibility:visible;}.  Target {width:100px;  height:100px;  Background:orange;  border-radius:4px; margin:20px 0;}. Animated. topin {animation:topin 1s ease;}. Animated. leftin {animation:leftin 1s ease;}.  btn {width:100px;  height:30px;  border:1px solid #ccc;  Outline:none; Transition:0.1s;}.  btn:active {border:none;  Background:orange; Color: #fff;}    @keyframes Topin {from {Transform:translatey ( -50px);   opacity:0;    } to {Transform:translatey (0px);   Opacity:1;    }} @keyframes LeftIn {from {Transform:translatex ( -50px);   opacity:0;    } to {Transform:translatex (0px);   Opacity:1; }}var show = Document.queryselector ('. Show '); var hide = DocuMent.queryselector ('. hide '); var container = Document.queryselector ('. container '); Show.addeventlistener (' Click ',  function () {Container.classList.add (' animated ');},! 1); Hide.addeventlistener (' Click ', function () { Container.classList.remove (' animated ');},! 1);

The demo displays as follows:

See the Pen <a href= ' https://codepen.io/yangbo5207/pen/NXKrPg/' >NXKrPg</a> by Ormie (<a href= ' https:// codepen.io/yangbo5207 ' > @yangbo5207 </a>) on <a href= ' Https://codepen.io ' >codepen</a>.

Codepen Demo Address

But it seems to be a little less effective than we want. Keep thinking. First you want the next element to appear one o'clock in the evening than the previous one, then it must be to control the delay time, and we have to have a lot of class to set the delay time.

. delay200 {    animation-delay:200ms;    Animation-fill-mode:backwards!important;}. delay400 {    animation-delay:400ms;    Animation-fill-mode:backwards!important;}. delay600 {    animation-delay:600ms;    Animation-fill-mode:backwards!important;}. delay800 {    animation-delay:800ms;    Animation-fill-mode:backwards!important;}

Animation-fill-mode:backwards!important; The goal is to maintain a state of 0 transparency before the element appears. Prevents the element from appearing directly after adding animated.

!important is added to prevent overwriting overrides for Animation-fill-mode properties when using animation shorthand in the new class. If you don't write!important here, you can't use shorthand in an animated class like Topin.

After that, we just need to add the above code to the CSS and make some changes to the HTML so that we can achieve the desired effect.

See the Pen <a href= ' https://codepen.io/yangbo5207/pen/mpbEEE/' >mpbEEE</a> by Ormie (<a href= ' https:// codepen.io/yangbo5207 ' > @yangbo5207 </a>) on <a href= ' Https://codepen.io ' >codepen</a>.

Codepen Demo Address

The complete code is as follows:

<p class= "Container" > <p class= "targets Aninode" > <p class= "Item LeftIn" > Spring Dawn </p> <p C Lass= "Item LeftIn delay200" > Spring sleepless </p> <p class= "Item leftin delay400" > Mosquito bites </p> <p class = "Item LeftIn delay600" > Night Come Rain </p> <p class= "Item LeftIn delay800" >< here please leave your talent ></p> </p > <button class= "btn Show" >show</button> <button class= "btn Hide" >hide</button></p>  . container {width:200px; margin:0 Auto;}. Aninode {Visibility:hidden;}. Animated. Aninode {visibility:visible;}. Targets {margin:20px 0;}.    Targets. Item {border:1px solid #ccc;    margin:10px 0;    Line-height:2;    PADDING:2PX 6px; border-radius:4px;}. Animated. topin {animation:topin 1s ease;}.  Animated. LeftIn {animation-name:leftin; Animation-duration:1s;}.  btn {width:100px;  height:30px;  border:1px solid #ccc;  Outline:none; Transition:0.1s;}. btn:active {border:none; Background:orange; Color: #fff;}     @keyframes Topin {from {Transform:translatey ( -50px)} to {Transform:translatey (0px)}} @keyframes leftin {from}    Transform:translatex ( -50px);   opacity:0;    } to {Transform:translatex (0px);   Opacity:1;    }}.delay200 {animation-delay:200ms; Animation-fill-mode:backwards!important;}.    delay400 {animation-delay:400ms; Animation-fill-mode:backwards!important;}.    delay600 {animation-delay:600ms; Animation-fill-mode:backwards!important;}.    delay800 {animation-delay:800ms; Animation-fill-mode:backwards!important;} var show = Document.queryselector ('. Show '); var hide = Document.queryselector ('. hide '); var container = Document.queryselector ('. container '); Show.addeventlistener (' Click ', Function () {Container.classList.add (' Animated ');},! 1); Hide.addeventlistener (' Click ', Function () {container.classList.remove (' animated ');},! 1);

We find that the logic of JS has not changed. Still just add/remove animated in the right place.

Eggs:

In practice, we will also encounter a more troublesome thing. is to delay the writing of class. We may not know how to use the time difference, how many elements will be used, and if it is written by hand, it is really too much trouble to repeat the work. So we can use JS dynamic insert. The code is as follows:

Const STYLESHEET = Getsheet (); var delay = 100;while (Delay < 10000) {    stylesheet.insertrule ('. Animated. Delay${del ay}{animation-delay: ${delay}ms; animation-fill-mode:backwards;} ', styleSheet.cssRules.length);    Delay + = Delay < 3000? 100:1000;} function Getsheet () {    var sheets = document.stylesheets;    var len = sheets.length;    for (var i = 0; I <= len; i++) {        var sheet = sheets.item (i);        try {            if (sheet.cssrules) {                return sheet;            }}        catch (e) {}     }    var style = Document.createelement (' style ');    Style.type = "Text/css";    document.getElementsByTagName (' head ') [0].appendchild (style);    return style.sheet;}

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How CSS quirks box models and standard box models are used

css implements accordion layout