HTML and CSS Reference
using the duration we defined in the animation property to determine how long each phase of
the animation takes.
The first and last keyframes are always 0% and 100% respectively, and they can be alternat-
ively written as from and to respectively. If we don't include 0% and 100% (or from and
to ), then the browser will construct the first and last keyframes automatically.
Additionally, you can specify multiple percentages into a single keyframe selector, comma-
separated, and even write the keyframes out of order. The browser will still render the anima-
tion in the order that is specified by the percentage keyframe selectors, regardless of the order
in which they appear in the CSS.
With those keyframes in place, the logo will fly in from the left side of the screen and rotate
as it appears, then settle in to its regular spot in the layout, as shown Figure 5.14 .
Figure 5.14. The RecipeFinder logo animated using CSS keyframe animations
Graceful Degradation and Page Performance
A lot of the techniques we've discussed in this chapter are not supported in older browsers
or, as is the case with gradients, are supported in older browsers using a different syntax.