HTML5: Your visual blueprint™ for designing rich web pages and applications

CREATE SIMPLE ANIMATIONS

One of the highly anticipated features of CSS3 is its capability to create simple animations without any JavaScript. A new group of animation properties and a selector expand on the idea of transitions, described in the previous section. To begin, compose a CSS rule that matches what you would like to animate:

selector {
   -webkit-animation-name: name;
   -webkit-animation-direction: direction;
   -webkit-animation-duration: duration;
   -webkit-animation-iteration-count: count;
   property: value1;
 }

The name value is an identifier used to link the selected element to the @-webkit-keyframes rule. Thedirection value, which defaults to normal, can be changed to alternate, causing the animation to move forward and backward every ...