CSS3 @keyframes Rules

CSS3 @keyframes Rules

Instance

Make a DIV element move 200 pixels gradually:

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

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

Try it?
There are more examples at the bottom of this page. Browser support

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

Label definition and usage instructions

Using the @keyframes rule, you can create animations.

Creating animations is done by gradually changing the settings from one CSS style to another.

You can change the CSS style settings several times during the animation process.

The specified change occurs when you use%, or the keyword "from" and "to", which is the same as 0% to 100%.

0% is the start animation, and 100% is when the animation is complete.

For best browser support, you should always define a selector of 0% and 100%.

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

Grammar @keyframesAnimationname{Keyframes-selector{css-styles;}}

value	Description
Animationname	Required. Defines the name of the animation.
Keyframes-selector	Required. The percentage of the duration of the animation. Legal value: 0-100% From (same as 0%) To (same as 100%) Note: You can use an animated keyframes-selectors.
Css-styles	Required. One or more legitimate CSS style properties

Online example
Instance

Add an animation to many 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?
Instance

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?
Instance

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;}
}

CSS3 @keyframes Rules