Using CSS3 's @keyframes animations

CSS3 's @keyframes, which can replace many web animated images, Flash animations, and javascripts.

Animated properties of CSS3

The following table lists @keyframes rules and all animation properties:

Browser support

The number in the table represents the first browser version number that supports the property.

The number immediately preceding the-webkit-,-ms-or-moz-is the first browser version number that supports the prefix property.

Example:

@keyframes myfirst{from    {background:red;}    to {Background:yellow;}} @-webkit-keyframes Myfirst/* Safari with Chrome */{from    {background:red;}    to {Background:yellow;}}

When you create an animation in @keyframes , bind it to a selector, otherwise the animation will have no effect.

Specifies that at least these two CSS3 animated properties are bound to a selector:

• Specify the name of the animation

• Specify the duration of the animation

Such as:

p{    Animation:myfirst 5s;    -webkit-animation:myfirst 5s; /* Safari with Chrome */}

Note: You must define the name of the animation and the duration of the animation. If the duration is omitted, the animation will not run because the default value is 0.

Example: Note: This instance is not valid in Internet Explorer 9 and earlier versions of IE.

p{width:100px;    height:100px;    background:red;    position:relative;    Animation-name:myfirst;    animation-duration:5s;    Animation-timing-function:linear;    Animation-delay:2s;    Animation-iteration-count:infinite;    Animation-direction:alternate;    animation-play-state:running;    /* Safari and Chrome: */-webkit-animation-name:myfirst;    -webkit-animation-duration:5s;    -webkit-animation-timing-function:linear;    -webkit-animation-delay:2s;    -webkit-animation-iteration-count:infinite;    -webkit-animation-direction:alternate; -webkit-animation-play-state:running;}    @keyframes myfirst{0% {background:red; left:0px; top:0px;}    25% {background:yellow; left:200px; top:0px;}    50% {background:blue; left:200px; top:200px;}    75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}    @-webkit-keyframes Myfirst/* Safari and Chrome */{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;}    50% {background:blue; left:200px; top:200px;}    75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}