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

Custom Search