Animated sequence of CSS3 animation

This time to everyone to bring CSS3 animation sequence animation, use CSS3 animation sequence animation Note what, the following is the actual case, together to see.

First review the animation animation to add various parameters

(1) The infinite parameter, which indicates that the animation will loop indefinitely. You can also insert a time parameter between the speed curve and the number of plays to set the time of the animation delay. If you want the icon to start spinning again after 1 seconds and rotate two times, the code is as follows

. close:hover::before{    -webkit-animation:spin 1s linear 1s 2;    animation:spin 1s linear 1s 2;}

(2) Alternate parameters. Animation animation to add the inverse play parameter alternate. When this parameter is added, the animation will play back the animation in an even number of times.

. close:hover::before{    -webkit-animation:spin 1s linear 1s 2 alternate;    animation:spin 1s linear 1s 2 alternate;}

In the animation attribute parameter, the delay parameter is one of our more commonly used parameters. When the object of an animation is multiple, we often use the delay parameter to form an animation sequence. The following code defines 5 different icons:

<span class= "Close Icon-suningliujinyun" >close</span><span class= "Close Icon-shousuo" >Close</ Span><span class= "Close Icon-zhankai" >close</span><span class= "Close Icon-diaoyonglian" >Close </span><span class= "Close Icon-lingshouyun" >Close</span>

The basic style of the icon is the same as the previous close icon, except that the icons here are set to Inline-block so that they can be arranged horizontally. The code is as follows:

. close{    font-size:0px;/* make the text in span not display */    cursor:pointer;/* make the mouse pointer appear as the hand type */    display:inline-block;    width:100px;    height:100px;    line-height:100px;    border-radius:50%;/* make the background shape appear round *    /background: #FFF;    Color: #8b8ab3;    Text-align:center;}. close::before{    font-family: ' Suningcloud ';    Speak:none; /* Make text content unreadable through assistive devices such as screen readers */    font-size:48px;    Display:block;}

The initial display, as shown;

Next, add the animation animation to the icon, offset the initial position of the icon downward-100%, and then move it back up to the initial position, while making the icon change from full transparency to completely opaque

. close{font-size:0px;/* make the text in span not appear */cursor:pointer;/* make the mouse pointer appear as a hand type */display:inline-block;width:100px;height : 100px;line-height:100px;border-radius:50%;/* causes the background shape to appear as a circle */background: #FFF; color: #8b8ab3; text-align:center;/**/- webkit-animation:moving 1s linear;animation:moving 1s linear;} @-webkit-keyframes Moving {from    {        opacity:0;        -webkit-transform:translatey (100%);    }    to {        opacity:1;        -webkit-transform:translatey (0%);    }} @keyframes Moving {from    {        opacity:0;        Transform:translatey (100%);    }    to {        opacity:1;        Transform:translatey (0%);    }}

The animation effects of the above 5 icons are all at the same time, so we will add a delay for each animation in order to make the icons move in a sequential order. Unlike the previously used method, we can set the animation animation delay directly through the Animation-delay property, with the following code:

. icon-suningliujinyun{-webkit-animation-delay:0s;animation-delay:0s;}. Icon-shousuo{-webkit-animation-delay:.1s;animation-delay:. 1s;}. Icon-zhankai{-webkit-animation-delay:.2s;animation-delay:. 2s;}. Icon-diaoyonglian{-webkit-animation-delay:.3s;animation-delay:. 3s;}. Icon-lingshouyun{-webkit-animation-delay:.4s;animation-delay:. 4s;}

In the above code, we set 5 icons with delay time of 0, 0.1, 0.2, 0.3, and 0.4s, respectively. In fact, a delay of 0 seconds is the default value, so the first icon does not actually need to set the delay code. Test the page, animate the effect.

Inside I refreshed two times, found the beginning, a few icons will flash at the top of the past. This counts as a bug.

The cause of this bug: In addition to the first icon, the rest of the icons have a certain animation delay, and when the animation does not start, the icon is not offset, is completely opaque, only when the animation begins the moment, the icon will switch to fully transparent and offset animation start state.

WORKAROUND: You need to use the Animation-fill-mode property of the animation animation. This attribute specifies how the element is in the state outside of the animation time. If the value is forwards, then the property value in the last Keyframe is preserved after the animation is complete, which is the opposite when backwards, which means that the element applies the attribute value in the first keyframe before the animation delay. When the value is both, it means that there are two settings for both forwards and backwards. In this case, we can use either backward or both,

. close{    font-size:0px;/* make the text in span not display */    cursor:pointer;/* make the mouse pointer appear as the hand type */    display:inline-block;    width:100px;    height:100px;    line-height:100px;    border-radius:50%;/* make the background shape appear round *    /background: #FFF;    Color: #8b8ab3;    Text-align:center;    /**/    -webkit-animation:moving 1s linear;    animation:moving 1s linear;    /* Clear jitter */    -webkit-animation-fill-mode:both;    Animation-fill-mode:both; }

The effect is as follows:

PS: You can also set the speed curve like the transition animation in animation

For example, in this example, we hope that the movement of the icon with a little elastic effect, that is, when the icon moves upward, not slowing down and stop at the end point, but to reach the end of the upward movement, more than a certain distance after the opposite direction of movement back to the end, to form a reciprocating effect.

We can certainly use frame animations to achieve this effect, but it's easier to use a speed curve. To use custom curves, we often need tools because the CSS3 animation uses a three-time Bezier (Cubic Bézier) mathematical function to generate the velocity curve, and the function's parameters are not intuitive. We can use a site such as cubic-bezier.com to visually adjust the speed curve.

Next, we are able to write the velocity curve to the parameters of the animation property, with the following code:

. close{    font-size:0px;/* make the text in span not display */    cursor:pointer;/* make the mouse pointer appear as the hand type */    display:inline-block;    width:100px;    height:100px;    line-height:100px;    border-radius:50%;/* make the background shape appear round *    /background: #FFF;    Color: #8b8ab3;    Text-align:center;    /**/    /*-webkit-animation:moving 1s linear;    animation:moving 1s linear;*/    /*cubic-bezier*/    -webkit-animation:moving 1s cubic-bezier (. 62,-0.91,. 45,1.97);      animation:moving 1s cubic-bezier (. 62,-0.91,.45,1.97);    /* Clear jitter */    -webkit-animation-fill-mode:both;    Animation-fill-mode:both; }

The effect is as follows:

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:

Using HTML and CSS to implement the Cornell notes

On the layout of CSS Web pages