O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required