CSS3 @keyframes rule
Topic: CSS3 Properties ReferencePrev|Next
Description
The @keyframes CSS at-rule is used to specify the intermediate steps during the cycle of an animation sequence by establishing the keyframes along the animation sequence.
A @keyframes rule consists of the keyword "@keyframes", followed by an identifier giving a name for the animation (which will be referenced using animation-name property), followed by a set of style rules (delimited by curly braces).
The keyframe selector for a keyframe style rule starts with a percentage (%) or the keywords from (same as 0%) or to (same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation.
Syntax
The syntax of this at-rule is given with:
|
@keyframes animation-name { keyframes-selector { property: value; } } |
The example below shows the @keyframes at-rule in action.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
/* Standard syntax */
animation-name: moveit;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
/* Standard syntax */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Note: If a keyframe selector specifies negative percentage values or values higher than the 100%, then the keyframe will be ignored.
Parameters
The following table describes the parameters of this at-rule.
| Value | Description |
|---|---|
| Required — The following parameters are required for the CSS to be valid. | |
animation-name |
The name of the animation. |
| keyframes-selector | Specifies the percentage along the duration of the animation. The keyframe declaration block for a keyframe rule consists of properties and values. |
Browser Compatibility
The @keyframes rule is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Media Types.
