CSS3 @ keyframes animation, css3 @ keyframes

CSS3 @ keyframes animation, css3 @ keyframes

@ Keyframes of CSS3, which can replace many webpage animated images, Flash animations, and JAVAScripts.

Animation attributes of CSS3

The following table lists the @ keyframes rules and all animation attributes:

Browser support

The number in the table indicates the first browser version that supports this attribute.

The number that follows "-webkit-", "-ms-", or "-moz-" is the first browser version that supports this prefix attribute.

Example:

@ Keyframes myfirst {from {background: red;} to {background: yellow; }}@-webkit-keyframes myfirst/* Safari and Chrome */{from {background: red ;} to {background: yellow ;}}

 

When@ KeyframesCreate an animation and bind it to a selector. Otherwise, the animation will not have any effect.

Specify at least two CSS3 animation attributes to bind to a selector:

• Specifies the animation name
• Specifies the animation duration

For example:

Div {animation: myfirst 5S;-webkit-animation: myfirst 5S;/* Safari with Chrome */}

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

 

Instance:Note:This instance is invalid in Internet Explorer 9 and earlier IE versions.

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