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

Editor to share with you how to use keyframes in css3. I hope you will get something after reading this article. Let's discuss it together.

Keyframes in css is used to specify the animation action of the element, which is a css rule for creating animation; the keyframe rule consists of the keyword "@ keyframe" and the syntax is "@ keyframes animation name {keyframes-selector {css-styles;}}".

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

This property is closely related to the animation property.

Keyframes translated into Chinese means "key frame". If you have used flash, it should be easier to understand. Of course, it will not be flash and there will be no problem.

You can also use the transition property to achieve transition animation, but it is slightly rough, because you cannot control the animation process more finely, for example, you can only control the transition of a certain attribute in a specified period of time, while the animation attribute can use @ keyframes to divide the animation within a specified period of time into finer.

Grammatical structure:

@ keyframes animationname {keyframes-selector {css-styles;}}

Parameter resolution:

Animationname: declares the name of the animation.

Keyframes-selector: used to divide the length of animation, either in percentage form or in the form of "from" and "to". The forms of "from" and "to" are equivalent to 0% and 100%. It is recommended that you always use the percentage form.

Examples are as follows:

Document div {width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite;} @ keyframes fadenum {100% {transform:rotate (360deg);}}

Output result:

After reading this article, I believe you have a certain understanding of "how to use keyframes in css3". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.