HTML and CSS Reference
In-Depth Information
■
See “Setting the Pace of the Transition” in Chapter 20 for details of the
cubic-bezier()
and
steps()
functions.
Note
Adding
animation-timing-function
to a keyframe tells the browser how to handle the pace of the transition
to the next keyframe. For example, the
highlight
example in the preceding section has been amended to use
ease-out
for both halves of the animation like this:
@keyframes highlight {
from {
background-color: rgba(255,204,0,0);
animation-timing-function: ease-out;
}
50% {
background-color: rgba(255,204,0,.5);
animation-timing-function: ease-out;
}
to {
background-color: rgba(255,204,0,0);
}
}
You can set
animation-timing-function
on each keyframe except the last one (
100%
or
to
). If you set a
timing function on the ending keyframe, it's ignored.
If you don't specify
animation-timing-function
for a keyframe, the default
ease
is used. However, you can
specify a different default as described in “Setting the Timing Function Between Keyframes” later in this chapter.
■
The same timing function applies to all properties. if you want some properties to change at a different
pace, you need to define a separate
@keyframes
rule and apply multiple animations on the target element(s).
Note
Animating Elements with Keyframes
Once you have defined the keyframes for an animation, you can animate elements in your pages using the CSS
properties listed in Table
21-1
. There are eight individual properties and a shorthand one.