Animate SVG elements

- [Chris] Hi. This is Chris Converse and in this episode we'll use CSS keyframes to add in animation within an svg file. This technique will work in all modern browsers, with the exception of Microsoft's Internet Explorer and Edge browsers, which at the time of this recording, make up less than 14% of the browsers used worldwide. If you'd like to follow along, download the exercise files and we'll begin by opening the HTML file and then Text Editor. Once you have the HTML file open, you'll see in the body area we have a header. Inside of the header, there's an image reference that points to title.svg.

This is the graphic here with the sun graphic and the word sunlight. There's also a background graphic being assigned into the header element through CSS which uses another svg file. It's that svg file where were going to be adding our animation. To continue, let's go back to the exercise files, and inside the Images directory, let's open the sun_rays.svg file in our Text Editor. Now inside the svg file, you'll see that we have a definitions element set up. Then inside of there, we have the style element, and all of our CSS is inside of a CDATA comment here because this is a XML file.

To begin, let's get our cursor after the rule that targets the # of rays space path and we're going to add our keyframes. So we'll start with an at symbol, type in keyframes, then a space. Next we'll name the animation. We'll call this rotate_rays. Add a space. Put in our curly brackets. We'll split this open. For the first keyframe position, we're going to set 0%. Then I'll add a few spaces. Add in another set of curly brackets and we're going to set the 0% keyframe transform property to zero degrees.

So we'll add the transform property, colon, space, then type rotate, beginning and ending parenthesis, then a semicolon. Inside of the parentheses, we're going to type zero then deg for degrees. Next let's duplicate that line. Let's bring the cursor back to the beginning. Let's set this keyframe at the 100% mark. We'll keep the transform property and let's change the rotation to 360 degrees.

Now that we have our keyframes defined, we need to apply this animation to the rule that targets the rays #. Up here we can see #rays. This targets this group down here inside of our svg. Let's come up here after transform-origin. Let's hit a return. Let's type in the animation property. Colon, space. I'll come down here, selecting copy the rotate_rays name. Let's paste it up here. Then add a space.

Let's type in 55s for 55 seconds. We want this to take 55 seconds to do a complete rotation. Then a space. We'll type in the word infinite. We want it to loop forever. We're going to set the animation physics to linear. This way the animation will move in a constant state. With all of these in place, let's hit Save in the svg file. Go back to the browser and hit Reload. We'll now see that we have our rays # rotating around 360 degrees over the course of 55 seconds.

Again, this animation is contained inside of the svg file. So any browser that supports transformers inside svg will have this animation in place. With that, I'll conclude this episode. As always, thanks for watching.