Sams Teach Yourself SVG in 24 Hours

Using keyTimes

To understand the need for the keyTimes attribute, picture a circle fading slowly from black to 50% transparent. If the circle fades at a consistent pace, you will need only one animation, defining the beginning and ending points of both time and the object's transparency.

Now, if you wanted the circle to fade from black to 50% transparent in 2 seconds but then slowly fade to 100% transparent over 6 more seconds, you may consider creating two separate animations: one handling the fade of the circle from black to 50% transparent, the second from 50% black to 100% transparent.

Using keyTimes, however, the same task can be accomplished in one fell swoop. The keyTimes attribute accepts multiple values, separated by semicolons, allowing ...