Transitions and Animations 183
Because my animation-direction value is alternate, the animation
would then play in reverse, shrinking back to its original dimensions, and
then continue growing and shrinking infinitely because of the value of
animation-iteration-count.
Multiple Transitions
You can add multiple animations to an element using a comma-separated
list. This method works for each of the subproperties and the shorthand
property, so both of these examples are valid:
E {
animation-name: first-anim, second-anim;
animation-duration: 6s, 1.25ms;
animation-delay: 0, 750ms;
}
E { animation: first-anim 6s, second-anim 1.25ms 750ms; }
Here, lists of values are looped through to ensure that all proper-
ties have the same number of values applied, in exactly the same way as
described in “Multiple Transitions” on page 174.
Summary
Adding animations to CSS was originally considered a contentious move,
but I think the syntax used by the writers of these modules is pretty grace-
ful and adds a lot of flexibility without being overwhelmingly complicated.
Developers expressed concern that transitions and animations would
be misused and that we’d end up with a lot of garish, unusable websites.
Although a genuine concern, one really can’t stop people from doing that
now with the existing CSS properties (and, indeed, many do!). But used
sparingly and appropriately, these powerful new tools can add vibrancy to
web pages.
Color and Opacity: Browser Support
Chrome firefox safari ie
Transitions Yes Yes Yes IE10
Animations Yes* Yes Yes* IE10
* With vendor prefix
