CSS3 @keyframesRules


Example

Make a div element gradually move 200 pixels:

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

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

Try it Yourself »
More examples at the bottom of this page.

Browser Support

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-

Tag definition and usage instructions

Using the @keyframes rule, you can create animations.

Creating an animation is done by gradually changing from one CSS style setting to another.

During the animation, you can change the CSS style settings multiple times.

Use %, or the keywords "from" and "to", to specify when changes occur, which are the same as 0% to 100%.

0% is the beginning of the animation, 100% is when the animation is complete.

For the best browser support, you should always define the 0% and 100% selectors.

Note:Use the animation property to control the appearance of the animation, and also use the selector to bind the animation.

Syntax

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

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

Valid Values:

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

Note:You can use an animation keyframes-selectors.
css-styles Required. One or more legal CSS style properties.

Examples

Online Examples


Example

Add an animation to multiple keyframe selectors:

@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 »

Related Articles

CSS3 tutorial: CSS3 Animations

other extensions