'The keyframes rule (@keyframes)

The @keyframe rules are used to define an animation in a gradual mode of movement. The keyframes describe the state of properties at each stage of the animation. Optionally, they also specify the timing function (similar to transition-timing-function) that controls the pace of the transition between each stage. You define a set of keyframes using @keyframes followed by the name you want to give the animation. All the rules for the keyframes go inside a pair of curly braces. 

Syntax:

selector { 

    @keyframes animation_name { keyframes_selector { css_styles; } }

}

Values:

A keyframes-selector requires the percentage of the animation duration. The browser automatically sorts the keyframe definitions into ascending order. However, using this shorthand tends to make @keyframe rules difficult to read. The following list represents the values settings for the @keyframes rules:

• animation_name; This value is required and it specifies the name of the animation being created.
• keyframes_selector; Also required. It represents the value of the animation duration given in percentage (%) or keywords from / to. Percentage may be from 0% to 100%, where 0% equals ‘from’ and 100% equals ‘to’.
• css_styles; The last values is also required and it refers to one or more CSS style properties.

Example

The @keyframes rule example:

›› go to examples ››