CSS3 's @keyframes usage is detailed:

Original source: http://www.cnblogs.com/zuihongyan/p/5902541.html

CSS3 's @keyframes usage is detailed:
This property is closely related to the animation property, and the animation property can be found in the section CSS3 animation attribute usage.

I. Basic knowledge:
KeyFrames translated into Chinese, is the meaning of "key frame", if the use of flash should be better understanding of this, of course, there is no flash and no problem.
The transition property can also be used to animate transitions, but is slightly coarser because it does not allow finer control over the animation process, such as the ability to control the transition of a property over a specified period of time, The animation property, in turn, can use @keyframes to make the animation of the specified time period more finely divided.

Syntax structure:

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

Parameter resolution:
1.animationname: Declares the name of the animation.
2.keyframes-selector: The length of time used to divide an animation, either as a percentage or as a "from" and "to".
The form "from" and "to" are equivalent to 0% and 100%.
It is recommended to always use a percentage form.

Two. code example:

Example one:

<! DOCTYPE html>  
The above code implements a simple animation, the following simple analysis:
1. Use @keyframes to define an animation named Theanimation.
2. The animated name of the @keyframes declaration is to be used in conjunction with animation.
3.from to is equivalent to 0%-100%, so it is required to do a thing in 5s.

Example two:

<! DOCTYPE html>