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.
 
 
Search WWH ::




Custom Search