Home >Web Front-end >CSS Tutorial >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;
.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.
.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:
.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!