


A detailed discussion of the animation sequence of CSS3 animation special effects
Everyone knows that animation is a property of CSS. This article mainly introduces the relevant information of animation sequence (animation) of CSS3 animation special effects. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
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 all set to inline -block to enable them to 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 the icon animation animation, the initial position of the icon is shifted downward by -100%, and then moved upwards back to the initial position. In the process, the icon is changed 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 five icons are all performed at the same time. In order to make the icon movement sequential, 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 5 The delay times of each icon are 0, 0.1, 0.2, 0.3 and 0.4s respectively. 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, you can also set the speed curve like the transition animation
For example: 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 moves 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:
How to implement radio button animation special effects in CSS3
Pure css3 implementation 3D picture cube rotation animation special effects
Introduction to the clever use of css3 animation animation special effects plug-in
The above is the detailed content of A detailed discussion of the animation sequence of CSS3 animation special effects. For more information, please follow other related articles on the PHP Chinese website!

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

WebStorm Mac version
Useful JavaScript development tools

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

SublimeText3 Chinese version
Chinese version, very easy to use
