CSS3 @keyframes Rule

Example

Make a div element move gradually 200px down:

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

@-webkit-keyframes mymove /*Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The @keyframes rule is not supported in any browsers.

Safari and Chrome support an alternative, the @-webkit-keyframes rule.


Definition and Usage

With the @keyframes rule, you can create animations.

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 change will happen in percent, or 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.

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.


Syntax

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

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


Examples

Try it Yourself - 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;}
}

@-webkit-keyframes mymove /*Safari and Chrome */
{
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;}
}

@-webkit-keyframes mymove /*Safari and Chrome */
{
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;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
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 »