HTML and CSS Reference
In-Depth Information
@keyframes button-glow {
0% { color: #000;background-color: #E69EE0; }
50% { color: #666;background-color: #FFEEEE; }
100% { color: #000;background-color: #E69EE0; }
}
TIP:
All animation blocks and properties require vendor prefixes
at the time of this writing; I've removed them here for brevity. In the
code example you'll see that this is quite a lot of code, especially because
I had to add vendor-prefixed versions of all the animation blocks as well as
the animation properties appearing in rulesets, which you'll see later. You
write a vendor-prefixed at-rule in basically the same way as a vendor pre-
fixed property—for example,
@-o-keyframes { }
. Note that there's a hyphen
between the
@
and the prefix,
and
the prefix and
keyframes
.
So the keyframes block is actually a specialized at-rule block. You start it by
writing
@keyframes
, add an identifying name of your choosing for the animation,
and then add a pair of curly braces. Inside the curly braces, you specify as many
keyframes as you want to dictate what happens throughout the course of the ani-
mation in terms of what property changes you want to occur. The browser works
out smooth animations between the different keyframes.
The two ways of specifying where the keyframes sit along the course of the
animation are shown in the preceding code snippet. If you want to specify a key-
frame only at the start and end of the animation (0% and 100% along), you can
use the keywords
from
and
to
, as shown in the first block. Or you could use
0%
and
100%
instead.
As you can see, in the second block I've specified three different keyframes,
denoting
background-color
changing to a different color and then back again.
Because the first and last keyframes are the same, you could rewrite this code
block like so:
@keyframes button-glow {
0%, 100% { color: #000;background-color: #E69EE0; }
50% { color: #666;background-color: #FFEEEE; }
}
