ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 188

ANIMATIONS

The next stop on this journey is CSS Animations. As discussed previously, ani-
mations differ from transitions in that transitions are triggered by state changes,
whereas animations happen independently. I would argue that animations therefore
have a wider scope and are more useful than transitions. For example, you could
use JavaScript to apply a CSS Animation to an element anytime you want, perhaps
by attaching an animation to an ID selector and appending that ID to the element
when a specific event occurs. This makes it easier, for example, to allow users to
click links to fire animations.
Yo u c a n a l s of u s e C S S A n i m a t i of n s w i t h n of Ja v a S c r i p t t of c r e a t e i n t r of s e q u e n c e s of f
elements sliding into place or constant ambient background animations. Browser
support for CSS Animations is shown in Ta b l e 5 . 3 .

TAB LE 5.3 Browser Support for Animations

BROWSER ANIMATIONS

Opera 12 with -o-

Firefox 5 with -moz-

Safari 4 with -webkit-

Chrome 4 with -webkit-

Internet Explorer 10 with -ms-

iOS 3.2 with -webkit-

Android 4 with -webkit-

Mobile Chrome Since Beta with -webkit-

Opera Mobile No

Opera Mini No

Note that in IE10 platform preview 6, support for non-prefixed
animation properties has been added.

Yo u ' l l e x p l o r e v a r i o u s a n i m a t i o n u s e s t h r o u g h o u t t h i s s e c t i o n .