NoteRefer to Chapter 3, “Motion Design Theory,” to learn more about animation
design best practices.Sneaky images
You’re not done yet. There’s more to this section than meets the eye, as we haven’t fully
explored the ways in which images can materialize on a page. The obvious culprit is the
img element, but there are two other ways that images can sneak onto your pages.
CSS gradients
These are actually a type of image. Instead of being pre-produced by a photo editor, they
are produced at run-time according to CSS styling definitions, for example, using a
linear-gradient() as the background-image value on an element. The
solution here is to opt for solid-color backgrounds instead of gradients whenever possible.
Browsers can easily optimize the rendering of solid chunks of color, but, as with images,
they have to work overtime to render gradients, which differ in color from pixel to pixel.
Shadow properties
The evil twin siblings of gradients are the box-shadow and text-shadow CSS
properties. These are rendered similarly to gradients, but instead of stylizing
background-color, they effectively stylize border-color. What’s worse, they
have opacity falloffs that require browsers to perform extra compositing work because the
semitransparent portions of the gradients must be rendered against the elements
underneath the animating element. The solution here is similar to the previous one: if your
UI looks almost as good when you remove these CSS properties from your stylesheet, pat
yourself on the back and never look back. Your website’s performance will thank you.
These recommendations are simply that: recommendations. They are not performance
best practices since they sacrifice your design intentions for increased performance.
Considered them only as last resorts when your site’s performance is poor and you’ve
exhausted all other options.
Technique: Degrade animations on older browsers
You don’t have to neglect supporting underperforming browsers and devices. If you
embrace a performance-minded workflow from day one, you can simply provide them
with a degraded—but completely functional—experience.