CSS @keyframes Rule
Example
Let an element move gradually down, from 0px to 200px:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS @keyframes rule is used to control the steps in an animation sequence by defining
CSS styles for points along the animation sequence.
An animation is created by gradually changing from one set of CSS styles to another. During an animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
Tip: For best browser support, you should always define both the 0% and the 100% selectors.
Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.
Note: CSS declarations with !important is ignored in a keyframe (See last example on this page).
Browser Support
The numbers in the table specifies the first browser version that fully supports the at-rule.
| At-rule | |||||
|---|---|---|---|---|---|
| @keyframes | 43 | 10 | 16 | 9 | 30 |
CSS Syntax
@keyframes name {
keyframes-selector {css-styles;}
keyframes-selector {css-styles;}
...
}
Property Values
| Value | Description |
|---|---|
| name | Required. Defines a name for the keyframe |
| keyframes-selector | Required. Points along the animation sequence. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation sequence |
| css-styles | Required. One or more CSS properties and values |
More Examples
Example
Several keyframe-selectors in one @keyframe:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Try it Yourself »
Example
Change several CSS properties:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Try it Yourself »
Example
Several keyframe-selectors with several CSS properties:
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Try it Yourself »
Example
Note: CSS declarations with !important is ignored in a keyframe:
@keyframes mymove
{
from {top: 0px;}
50% {background: blue !important;} /* ignored
*/
to {top: 200px;}
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Animations
