HTML and CSS Reference
In-Depth Information
forwards
.
This value makes an element with an animation applied to it
retain the styles defined by the properties in the final keyframe, after the
animation ends. The final keyframe will usually be
100%
or
to
. This value is
rather useful if you want the animations to finish in their final, not begin-
ning, states—for example, when putting the building blocks of a layout
into place upon page load.
backwards
.
This property value causes styles defined in the first keyframe
(usually
0%
or
from
) to be applied to the element the animation is applied to
during an
animation-delay
rather than the default element styles.
both
.
This value applies the combined effects of
forwards
and
backwards
to an element undergoing an animation.
I won't provide isolated examples for you to see now; instead, I'll present some
examples later in the chapter that use these values.
SHORTHAND AND MULTIPLE ANIMATIONS
Yo u n e e d t of w r i t e a l of t of f c of d e f of r C S S A n i m a t i of n s d u e t of h a v i n g t of w r i t e k e y f r a m e
blocks as well as include multiple properties to control how the animations are
applied to elements. Fortunately, you can use a shorthand animation property to
significantly reduce the amount of code needed.
The following properties:
animation-name: whoosh;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-delay: 3s;
animation-iteration-count: 25;
animation-direction: alternate;
animation-fill-mode: backwards;
can be whittled down to this one line:
animation: whoosh 10s ease-in 3s 25 alternate backwards;
