SVG Animations

Chapter 3. CSS Animation and Hand-Drawn SVG Sprites

SVG performs extremely well as an icon format, but we’ll move a step further and use SVG sprites in performant complex animations using three different techniques. The first two are closely related to cel animation, while the third, detailed in Chapter 4, is a technique I recommend for more complex responsive animations and interactive SVGs.

From a design perspective, this is a more advanced animation technique. We’re discussing it at this point in the book because the actual animation can be created purely with CSS.  The book follows a progression based on animation technology (first CSS, then JavaScript libraries, then bare-metal JS), but feel free to skip around; Chapter 7 offers a comparison of animation techniques.

Keyframe Animation with steps() and SVG Sprites, Two Ways

If you’ve ever seen a Looney Tunes or old Disney animation, you might have been impressed with the fluid movement, considering that every frame was hand-drawn. Such effects are possible on the web with SVG sprites, and we can stand on the shoulders of previous animators while employing new development techniques.

Of all web-based animation techniques, step animation most closely resembles these old hand-drawn cel animations. Cel is short for “celluloid,” a type of transparent material used by animators to draw on top of their previous drawings, thereby defining a sequence and creating the illusion of movement. This technique functioned a bit like a flip ...