178 Chapter 14
animation-duration
The duration of an animation is set by the animation-duration property,
which is functionally identical to the transition-duration property intro-
duced earlier in this chapter:E { animation-duration: time; }As with transition-duration, the time value is a number with a unit of
either ms or s, or a 0 (zero), which prevents the animation from running.
(Negative values are also implemented as 0 .) To extend the example anima-
tion so it’s six seconds in duration, you add this line:div { animation-duration: 6s; }animation-timing-function
Another property that should be familiar is animation-timing-function, which
again is functionally identical to its counterpart transition-timing-function:E { animation-timing-function: value; }Permitted values are the timing function keywords (ease, linear, ease-in,
ease-out, and ease-in-out), the cubic-bezier() function (explained in “The
Cubic Bézier Curve” on page 168), or the steps() function (explained in
“The steps() Function” on page 170). Therefore, if you want to make your
animation “ease in” at the start, you add this code:div { animation-timing-function: ease-in; }animation-delay
Yet another familiar property is animation-delay, which is identical in func-
tion to its counterpart, the transition-delay property:E { animation-delay: time; }Like animation-duration (and the two corresponding transition-* prop-
erties), the time value is a number with a unit of either ms or s, which sets
the delay before an animation begins. A 0 (zero) means no delay. As with
transition-duration, negative values cause the animation to “skip” by that
amount.
To delay the example animation by two seconds, you include this code:div { animation-delay: 2s; }