Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how css3 controls the rotation time. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Methods:

1. Define a rotation animation for the element using the animation attribute and the "@ keyframes" rule

2. Use the "animation-duration" attribute setting to control the rotation time of the element, and the syntax is "element {animation-duration:time;}".

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

How does css3 control rotation time

In css, you can use the animation attribute to bind animation effects to elements, and use the "@ keyframes" rule to specify animation actions for elements.

Use the animation-duration property to define the time it takes for an animation to complete a cycle, in seconds or milliseconds.

Examples are as follows:

Document .div1 {width:100px; height:100px; background-color:pink; animation:fadenum; animation-duration:10s;} @ keyframes fadenum {100% {transform:rotate (360deg);}} .div2 {width:100px; height:100px; background-color:pink Animation:fadenum1; animation-duration:5s; @ keyframes fadenum1 {100% {transform:rotate (360deg);}}

Output result:

This is how the css3 controls the rotation time shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.