css3 animation sequence animation

This time I will bring you the css3 animation sequence animation. What are the precautions for using css3 animation sequence animation? The following is a practical case, let’s take a look.

First review the various parameters added to the animation animation

(1) infinite parameter, indicating that the animation will loop infinitely. A time parameter can also be inserted between the speed curve and the number of playbacks to set the animation delay time. If you want the icon to start rotating after 1 second and rotate twice, the code is as follows

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

(2) alternate parameter. Add the reverse playback parameter alternate to the animation animation. After adding this parameter, the animation will play in reverse at an even number of times.

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

Among the animation attribute parameters, the delay parameter is one of our more commonly used parameters. When there are multiple animated objects, we often use delay parameters to form animation sequences. For example, 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. The difference is 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;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
}
.close::before{
    font-family: 'suningcloud';
    speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
    font-size:48px;
    display:block;
}

is displayed during initialization, as shown in the figure below;

Next, add animation animation to the icon so that the initial position of the icon is downward Offset -100%, and then move up and back to the initial position. During this process, the icon changes from completely transparent to completely opaque.

.close{
	font-size:0px;/*使span中的文字不显示*/
	cursor:pointer;/*使鼠标指针显示为手型*/
	display:inline-block;
	width:100px;
	height:100px;
	line-height:100px;
	border-radius:50%;/*使背景形状显示为圆形*/
	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 performed at the same time. To give the icon motion a sequence, we will add a delay to each animation. Different from the previous method, we can set the animation delay directly through the animation-delay attribute. The code is as follows:

.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 the delay time of 5 icons to 0, 0.1, 0.2, 0.3 and 0.4s. In fact, a delay of 0 seconds is the default, so the first icon doesn't actually need to set a delay code either. Test page, the animation effect is as shown in the figure.

I refreshed it twice and found that at the very beginning, several icons would flash across the top. This is a bug

The reason for this bug is that except for the first icon, the rest of the icons have a certain animation delay. When the animation does not start, the icon is not offset and is completely opaque. Only when the animation starts does the icon switch to the fully transparent and offset animation start state.

Solution: You need to use the animation-fill-mode attribute of animation animation. This property specifies the state of the element outside of animation time. If the value is forwards, it means that the attribute value in the last key frame is retained after the animation is completed. When the value is backwards, it is just the opposite, which means that the attribute value in the first key frame is applied to the element before the animation is delayed, and When the value is both, it means that both forwards and backwards settings are included. In this example, we can use backward or both.

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
    /**/
    -webkit-animation: moving 1s linear;
    animation: moving 1s linear;
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

The effect is as shown below:

PS: In animation, it can also be like transition Set the speed curve like animation

For example, implementation: In this example, we hope that the movement of the icon has a little elastic effect, that is, when the icon moves upward, it does not slow down and stop at the end point, but continues to move upward after reaching the end point. , and then move in the opposite direction back to the end point after exceeding a certain distance, forming a reciprocating effect.

Of course we can use frame animation to achieve such an effect, but it will be easier to use a speed curve. To use custom curves, we often need some tools, because CSS3 animation uses the Cubic Bezier mathematical function to generate the speed curve, and the parameters of this function are not intuitive. We can use sites like cubic-bezier.com to visually adjust the speed curve.

Next, we can write the speed curve into the parameters of the animation attribute. The code is as follows:

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    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);
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

The effect is as shown below:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Using html and css to implement Cornell notes

##A brief discussion on the layout of css web pages

The above is the detailed content of css3 animation sequence animation. For more information, please follow other related articles on the PHP Chinese website!