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

Custom Search