HTML and CSS Reference
In-Depth Information
50% {
background-color: rgba(255,204,0,0.5);
}
to {
background-color: rgba(255,204,0,0);
}
}
In this example, the same values are used for
from
and
to
. To avoid repetition, you can group keyframe
selectors as a comma-separated list. So, the following
@keyframes
rule has exactly the same meaning as the
preceding one:
@keyframes highlight {
from,
to
{
background-color: rgba(255,204,0,0);
}
50% {
background-color: rgba(255,204,0,0.5);
}
}
The browser automatically sorts the keyframe definitions into ascending order. However, using this
shorthand tends to make
@keyframe
rules difficult to read.
■
Shorthand properties, such as
background
, cannot be animated. Table 20-4 in the preceding chapter
lists all the CSS properties that can be used in an animation.
Caution
Specifying the Timing Function Between Keyframes
Optionally,
@keyframes
rules can specify how the browser should calculate intermediate values between
each keyframe using the
animation-timing-function
property. This accepts the same values as
transition-timing-function
, namely:
ease
Starts slow, speeds up, and slows toward the end.
linear
Transitions at an even pace throughout.
ease-in
Starts slow and speeds up.
ease-out
Starts fast and slows toward the end.
ease-in-out
Similar to ease, but slower at each end.
cubic-bezier()
Specifies a custom transition using a cubic-bézier curve.
step-start
The change takes place at the beginning of the duration.
step-end
The change takes place at the end of the duration.
steps()
The change takes place in the specified number of equal steps.
