HTML and CSS Reference
In-Depth Information
For example, because I wanted the button glow to run seamlessly, I specified
the
button-glow
animation like this:
@-keyframes button-glow {
0% { color: #000;background-color: #E69EE0; }
50% { color: #666;background-color: #FFEEEE; }
100% { color: #000;background-color: #E69EE0; }
}
If I specified
animation-direction: alternate;
on the
a:hover,a:focus { }
ruleset
, I could rewrite my keyframes as this:
@-keyframes button-glow {
0% { color: #000;background-color: #E69EE0; }
100% { color: #666;background-color: #FFEEEE; }
}
I can now halve the
animation-duration
value, because each iteration would
now be half the button glow pulse. This is a more e
cient way to write this example
and any others where you want the animation to do something and then return to
its original state. But not all animations will be like this.
I've included this updated version for you in the chapter5 download folder as
animation-basics2.html.
ANIMATION-FILL-MODE
The
animation-fill-mode
property allows you to specify how the animated ele-
ment is displayed after an animation ends or during an
animation-delay
that
occurs before the animation starts (i.e., no effect on negative animation delays).
The possible values of
animation-fill-mode
are as follows:
none
.
This is the default value. When an animation ends, the element it is
applied to will go back to using its intrinsic styling. In addition, no styling
from the animation keyframes will be applied to the element during an
animation delay.
