CSS @keyframes rule

Definition and Usage

You can create animations through the @keyframes rule.

The principle of creating an animation is to gradually change one set of CSS styles into another.

During the animation process, you can change this set of CSS styles multiple times.

Specify the time when the change occurs in percentage, or use the keywords 'from' and 'to', which are equivalent to 0% and 100%.

0% is the start time of the animation, and 100% is the end time of the animation.

Tip:To ensure the best browser support, you should always define the 0% and 100% selectors.

Tip:Use animation properties to control the appearance of the animation, while binding the animation to the selector.

Note:!important rule is ignored in keyframes (see the last example on this page).

See also:

CSS3 Tutorial:CSS3 Animation

Instance

Example 1

Make the div element move downward uniformly:

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

Try it yourself

Example 2

Add multiple 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 3

Change multiple 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 4

Multiple keyframe selectors with multiple 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 5

Note:The !important rule is ignored in keyframes:

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

Try it yourself

CSS syntax

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

Attribute value

Value Description
animationname Required. Defines the name of the animation.
keyframes-selector

Required. The percentage of animation duration.

Valid values:

  • 0-100%
  • from (same as 0%)
  • to (same as 100%)
css-styles Required. One or more valid CSS style properties.

Browser support

Chrome IE / Edge Firefox Safari Opera
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-