Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterSFirst, you’re going to place the snowflake onto the page as multiple images. The flakes will be different sizes
and will start in different locations, but they will share the same animation characteristics: they will fall down
from the sky, drifting laterally in the breeze as they do so. (See Listing 7-18.)
Listing 7-18. SVG Snowflakes Placed As Images on a Page
Next, you’ll apply the CSS to create the impression of a winter sky through a gradient and create a base size
for the snowflakes. At the same time, you’ll call on two keyframe sequences: one to spin the snowflakes as they fall
toward the bottom (called snow) and another to drift the snowflakes from side to side (drift). (See Listing 7-19.)
Listing 7-19. Base CSS for a Snowflake Animation
html { min-height: 100%; }
body { height: 100%; background: linear-gradient(#b5d3ff, #30509a); }
img.flake { width: 150px; height: 150px; position: relative;
animation: snow 8s linear infinite forwards,
drift 12s ease-in-out forwards infinite; }
The keyframe sequences run at different lengths, and each snowflake starts at a different height (Listing 7-20);
the combination creates the impression of random cycled motion.
Figure 7-3. Still from an SVG falling snowflake animation