Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterS
Listing 7-20. Keyframe Sequences for a Snowflake Animation
@keyframes snow {
100% { top: 700px; transform: rotate(2.2turn); }
}
@keyframes drift {
0% { left: -5px; }
25% { left: 55px; }
55% { left: -15px; }
100% { left: 0px; }
}
This works, but as you can see, there are two issues. The first is that, to add more snowflakes, you need to add
more images to the markup, which quickly becomes tiring. The second issue is the fact that smaller snowflakes
will be interpreted as being farther away, and so should take longer to fall off the bottom of the screen (which,
for this example, let’s assume is 700 pixels high). You can call on the snowflakes through the use of added classes
with different timings for the motion, shown in Listing 7-21.
Listing 7-21. Slowing Animation by Creating Secondary Classes
img.flake { width: 150px; height: 150px; position: relative;
animation: snow 8s linear infinite forwards,
drift 12s ease-in-out forwards infinite;
}
img.slow {
animation: snow 16s linear infinite forwards,
drift 24s ease-in-out forwards infinite;
}
Separate classes means that a slower snowflake could be controlled by calling on two classes. Creating more
variation would mean creating more classes, which returns to the same problem as with adding more snowflakes.
You’ll address this issue when you start integrating JavaScript with CSS3 animations in Chapter 9.
Tools for SVG
Right now one of the biggest obstacles to widespread use of SVG is the relative paucity of design tools. The most
popular include:
• Adobe Illustrator has an SVG export option but, as with many WYSIWYG tools, the code
it creates is not terribly efficient: generated SVG files usually contain far more code than
is necessary.• Inkscape (http://inkscape.org/), the open source alternative, shares the same issue as
Adobe Illustrator. Inkscape does, however, have the advantage of working with native SVG
files and it supports SVG filters.• Raphaël is a small JavaScript library that enables easy SVG creation and manipulation
from within JavaScript.