How to cancel Animation effect by css3
This article mainly explains "how to cancel animation effect by css3". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to cancel the animation effect with css3".
In css, you can cancel the animation effect with the "animation-play-state" attribute, which specifies the pausing effect of the animation. When the value of the attribute is "paused", the animation will be paused, that is, to cancel the animation effect, and the syntax "element {animation-play-state:paused}".
The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.
How to cancel Animation effect by css3
In css, to achieve unanimated effects, you can use the animation-play-state property.
The animation-play-state property specifies whether the animation is running or paused. The syntax is as follows:
Animation-play-state: paused | running
Where the attribute value is represented as follows:
Examples are as follows:
Document div {width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite;} @ keyframes fadenum {100% {transform:rotate (360deg);}} div:hover {animation-play-state:paused;}
Output result:
At this point, I believe you have a deeper understanding of "how to cancel the animation effect in css3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
