HTML and CSS Reference
In-Depth Information
But as is the case with many CSS features, the shorthand is much easier to maintain because
it uses less code, so we'll use that. While learning CSS it can be useful to use longhand for
many properties, just to aid familiarity with each property individually. But eventually, it's
almost always more practical to use the shorthand.
If we put that code into our CSS and refresh the page, we won't see anything happen. This is
because we haven't yet defined any actual keyframes to accompany the animation property.
Let's do that now.
@keyframes logomove {
0% {
transform: translateX(-800%) rotate(0);
}
100% {
transform: translateX(0) rotate(-360deg);
}
}
As shown here, keyframes are defined using the @keyframes at-rule. We learned about at-
rules in
Chapter 1
. Notice, however, that this at-rule is a little different. Here are some points
to help you understand this syntax:
• The
@keyframes
part is followed immediately by the custom animation name that
we chose and included in the animation property.
• There is one set of curly braces that wraps the entire set of keyframes.
• Each keyframe block has a selector with another set of curly braces for each key-
frame.
• Each keyframe selector is defined using a percentage.
A single keyframe represents how the element will look at that point in the animation. All
the in-between keyframes that aren't defined are where the animations take place. So between
keyframes the styles will transition, or animate, until they reach their state in later keyframes,
