Shulou(Shulou.com)05/31 Report--

This article mainly introduces "css3 how to set animation rotation speed" related knowledge, editor through the actual case to show you the operation process, the operation method is simple and fast, practical, I hope that this "css3 how to set animation rotation speed" article can help you solve the problem.

In css3, you can use the "animation-timing-function" property to set the animation rotation speed, which is used to specify how the animation will complete a cycle and to set the speed curve of the animation, with the syntax of "element {animation-timing-function: speed property value;}".

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

How to animate the rotation speed of css3

Animation-timing-function specifies how the animation will complete a cycle.

The speed curve defines the time it takes for an animation to change from one set of CSS styles to another.

The velocity curve is used to smooth the change.

Default value: ease

The syntax is:

Animation-timing-function: value

The mathematical function used by animation-timing-function is called cubic Bezier curve, velocity curve. Using this function, you can use your own values or one of the predefined values:

The values of the property are as follows:

The speed of linear animation is the same from beginning to end. test

Ease defaults. The animation starts at a low speed, then speeds up, and slows down before it ends. test

Ease-in animation starts at a low speed. test

The ease-out animation ends at a low speed. test

Ease-in-out animation begins and ends at a low speed. test

Steps (int,start | end) specifies the number of intervals (steps) in the time function. There are two arguments, the first of which specifies the number of intervals for the function, which is a positive integer (greater than 0). The second parameter is optional, indicating whether the animation is continuous from the beginning or the end of the time period. The meanings are as follows: start: means to start directly. End: default value, which means it comes to an abrupt end.

Cubic-bezier (n _ journal _ n) has its own value in the cubic-bezier function. The possible values are values from 0 to 1.

Examples are as follows:

Document .div1 {width:100px; height:100px; background-color:pink; animation:fadenum 5s; animation-timing-function:ease-in-out;} @ keyframes fadenum {100% {transform:rotate (360deg);}} .div2 {width:100px; height:100px; background-color:pink Animation:fadenums 5s; animation-timing-function:linear;} @ keyframes fadenums {100% {transform:rotate (360deg);}}

Output result:

This is the end of the introduction to "how to animate the rotation speed of css3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.