Tuesday 27 December 2011

Run an animation called myfirst, with all the animation properties set:

 Syntax 1:


 div
 {
 animation-name: myfirst;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running;
 /* Firefox: */
 -moz-animation-name: myfirst;
 -moz-animation-duration: 5s;
 -moz-animation-timing-function: linear;
 -moz-animation-delay: 2s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-direction: alternate;
 -moz-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;
 }

The same animation as above, using the shorthand animation property:

Syntax 2:

 div
 {
 animation: myfirst 5s linear 2s infinite alternate;
 /* Firefox: */
 -moz-animation: myfirst 5s linear 2s infinite alternate;
 /* Safari and Chrome: */
 -webkit-animation: myfirst 5s linear 2s infinite alternate;
 }

No comments:

Post a Comment