Game Development Reference
In-Depth Information
To use a CSS animation, you'll first need to create a named keyframe sequence,
specify all the properties for each keyframe, then assign that keyframe sequence to
some element. Similar to transitions, when you specify the keyframe sequence to an
element, you also specify the configurations for that sequence, such as animation
name, duration, timing function, delay, iteration count (how many times to play the
entire keyframe sequence), direction (whether the animation plays from the first key-
frame to the last or from the last to the first), and the play state (indicating whether
the animation is running or paused).
To set up a keyframe sequence, simply use the
@keyframes
keyword, followed by
a string identifying that sequence.
@keyframes myAnimation {
}
Then, in a way slightly different from other CSS properties, we nest other expres-
sions inside this declaration, where each sub-expression is an individual keyframe
declaration. Since each keyframe is a point in time (where the total time is specify
when the animation sequence is applied to an element, as we'll see shortly), we spe-
cify each keyframe in one of two ways: we can either specify a percentage of the
time for when a keyframe is called into action, or we can use the keywords
from
and
to
, indicating the point in time when 0 percent and 100 percent of the total animation
time has elapsed.
@keyframes myAnimation {
from {
background: #ffffff;
}
to {
background: #000000;
}
}
Note that the
from
keyword behaves the exact same way as 0 percent and the
to
keyword the same as 100 percent. Whether to use one over the other is purely a
matter of preference.
