CSS@keyframes Rule

Example

Let an element move gradually down, from 0px to 200px:

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

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 theanimation 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

@keyframesname{
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% from (same as 0%) to (same as 100%) Note: You can have manykeyframes-selectors in one animation sequence
css-styles	Required. One or more CSS properties and values

Value

Description

name

Required. Defines a name for the keyframe

keyframes-selector

Required. Points along the animation sequence.

Legal values:

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

Note: You can have manykeyframes-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 »