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.
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 ...