Css3 how to set the element to rotate in a 360-degree cycle, click stop.
Editor to share with you how css3 sets the elements to rotate in a 360-degree cycle and click stop. I hope you will get something after reading this article. Let's discuss it together.
Methods: 1, use the animation attribute to bind the element cycle rotation animation; 2, use the @ keyframes rule to set the animation rotation action; 3, use the "element: active {animation-play-state:paused}" statement to set the element cycle rotation, click the element to stop rotation.
The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.
In css, you can use the animation attribute to animate the loop rotation of an element, and then use the @ keyframes rule to animate the rotation action.
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 set it through the active selector. The example is as follows:
Document div {width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite;} @ keyframes fadenum {100% {transform:rotate (360deg);}} div:active {animation-play-state:paused;}
Output result:
After reading this article, I believe you have a certain understanding of "how to set the element to click stop when rotating in a 360-degree cycle". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!
