Transitions and Animations 181
So returning to the previous example code, if you add the following rule:
E { animation-fill-mode: both ; }
then element E would begin red, before transitioning to blue and staying
that color at the end of the animation; its original green wouldn’t be applied
at any point.
animation-play-state
The animation-play-state property sets whether an animation is active. Here’s
the syntax:
E { animation-play-state: keyword; }
The keyword value has two options: running means the animation is
playing, and paused means it isn’t. You can use this property to perform a
play/pause action:
E:hover { animation-play-state: paused; }
In this example, if you presume that element E has an animation applied,
passing the mouse over the element pauses the animation until the mouse
is moved off, at which time the animation continues.
The animation Shorthand
Throughout this section, I’ve assembled an example animation one prop-
erty at a time. Here’s how all the properties combined appear:
div {
animation-name: expand;
animation-duration: 6s;
animation-timing-function: ease-in;
animation-delay: 2s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}
That’s a lot of properties to declare for each animation. Once again,
however, you can take advantage of a shorthand property called animation,
and here’s the syntax:
E { animation: name duration timing-function delay iteration-count direction
fill-mode play-state; }
As with the transition shorthand, animation-duration and animation-delay
must be specified in order. If either is left out, the syntax presumes it is
animation-delay, which receives a default value of 0.
