How to realize the Animation effect of Mouse suspension and stop by css3

Editor to share with you css3 how to achieve mouse suspension stop animation effect, I hope you will gain something after reading this article, let's discuss it together!

In css, you can use the ": hover" selector and the "animation-play-state" attribute to achieve the mouse hover animation effect, with the syntax of "animation element: hover {animation-play-state:paused;}".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the animation attribute to animate an element; then use the @ keyframes rule to animate your work.

When we play the animation, if we want to pause the animation, we need to use the property animation-play-state. The animation-play-state property has two values: paused: pause the animation; running: continue to play the animation

We can pause the animation by selecting the state when the mouse is hovering over the element through the hover selector.

Let's take a look at it through an example, which is 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:

After reading this article, I believe you have a certain understanding of "css3 how to achieve mouse suspension stop animation effect". If you want to know more about it, you are welcome to follow the industry information channel, thank you for reading!