CSS

@keyframes

Rule

Example

Make an element move gradually 200px down:

@keyframes mymove
{
 
from {top: 0px;}
 
to {top: 200px;}
}

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the 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: The !important rule 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
rule.

Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix.

Property

@keyframes
43.0
4.0 -webkit-
10.0
16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

CSS Syntax

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

Property Values

Value
Description

animationname
Required. Defines the name of the animation.

keyframes-selector
Required. Percentage of the animation duration.

Legal values:

0-100%
from (same as 0%)
to (same as 100%)

Note: You can have many keyframes-selectors in one animation.

css-styles
Required. One or more legal CSS style properties

More Examples

Example

Add many keyframe selectors in one animation:

@keyframes mymove
{
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Try it Yourself »

Example

Change many CSS styles in one animation:

@keyframes mymove
{
 
0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

Try it Yourself »

Example

Many keyframe selectors with many CSS styles:

@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: The !important rule is ignored in a keyframe:

@keyframes myexample
{
 
from {top: 0px;}
  50%  {top: 100px !important;} /* ignored
*/
 
to   {top: 200px;}
}

Try it Yourself »

Related Pages

CSS tutorial: CSS Animations