Transitions and Animations 177
I hadn’t specified border-width again in the to keyframe (x), it would default
to the inherited value of the element the animation was applied to, mean-
ing the animation would be quite different.
Keyframe selectors can be chained just like other CSS selectors, so I
could write the previous code example like this:
@keyframes expand {
from, to { border-width: 4px; }
50% { border-width: 12px; }
to {
height: 100%;
width: 100%;
}
}
Likewise, you are not required to list the keyframe selectors in time
order; putting to before from is perfectly acceptable (although harder to
maintain, I bet), and any declaration conflicts are resolved by using the cas-
cade: Rules declared later take preference. For example, take a look at the
following keyframe ruleset where two keyframes have been defined at the
same point:
@keyframes example {
10% { background-color: red; }
10% { background: green; }
}
When the animation is applied, the element’s background color will be
green at the 10% point, as the rule declared later would apply.
Once you’ve defined the keyframes, the next step is to apply animation
control properties to the elements you want to animate. As I mentioned in
the introduction to this section, many of the animation properties share
syntax with their counterparts in the transition-* family, so you should
already be pretty familiar with them.
animation-name
The animation-name property refers to an animation that’s been defined with
the @keyframes rule, and, as such, the syntax is quite straightforward:
E { animation-name: name; }
You can see it requires only a single value, which is the name of an
already defined animation. To call the animation created in the previous
section, you use this:
div { animation-name: expand; }
The only other permissible value (and the default) is none, which pre-
vents any animations from occurring on this element.
