Creating an SVG Animation Sequence9:16 with Guil Hernandez
You can create fun and engaging animation sequences with SVG and CSS keyframe animations. In this video, you will create a simple badge animation using SVG, CSS keyframe rules, and animation properties.
[MUSIC] 0:00 Now that you have the basics of transitioning and transforming SVGs down 0:04 pat, it's time to explore the wonders of SVG animation with CSS keyframes. 0:08 Combining SVG and keyframe animations, you can make your graphics come to life by 0:13 creating simple yet fun and engaging animations like this. 0:18 Or you can create more complex animation sequences like this Traveler animation. 0:22 You can find all kinds of awesome SVG animations example on codepen.io. 0:26 Coming up in this video, I'm gonna teach you how to create a simple animation 0:31 sequence using SVG, CSS keyframe rules, and animation properties. 0:36 In a later video, you're gonna learn the concept behind SVG line animation. 0:40 You don't wanna miss that part. 0:43 Before we begin coding, 0:46 let's take a look at the animation sequence we're going to create. 0:47 As you can see, there are several animation steps happening at once, and 0:50 they're all using transform functions, like scale and rotate. 0:55 Now if this badge graphic looks familiar, 0:58 that's because it's the same SVG you worked with in the SVG Basics course. 1:01 Now we're gonna animate it. 1:05 So first, let's plan the animation sequence. 1:07 What are we gonna animate and what are the different steps of the animation? 1:10 So in this animation, there are five separate steps. 1:14 There's the scaling of the outer circle, 1:17 then there's the scaling of the inner circle. 1:19 After that, there's the scaling of the inline strokes. 1:20 And then we're rotating and scaling the star, and finally we're adding a pulsing 1:28 effect to the circles here, and this is done with scaling, so let's get to work. 1:33 In the latest workspace for this lesson, I have an HTML file linked to a style sheet. 1:39 And the HTML contains the embedded SVG graphic. 1:45 It's made up of circle shapes and paths. 1:49 So first, I wanna give some of these elements class names so 1:52 I can easily target them with CSS. 1:57 So I'll start by giving the svg element the class badge. 1:59 So next, the first circle element is the outer circle in the graphic, 2:10 so I'm going to give it a class of outer. 2:15 Now the next circle element is the inner circle in the graphic, so 2:21 I'll give this one a class of inner. 2:25 And the path element below draws the inline strokes between the outer and 2:30 inner circles. 2:35 So I'm going to give this path element the class inline. 2:37 Finally, the next set of paths and circles draw the star in the graphic. 2:44 So I wanna animate these six elements here as one object. 2:50 In the previous stage, 2:55 you learned how to use the g element to group SVG shapes together. 2:56 So I'm going to nest the path and circle elements here inside inside a g element. 3:00 And I'm going to give the g element the class star. 3:06 Then right after the last circle element and 3:13 right above the closing svg tag, I'll add a closing g tag. 3:16 So now I can transform this entire group here as a single object. 3:24 So next I'll save my index.html file. 3:29 And I'm going to open style.css and write the keyframes for the animation 3:33 sequence so that the keyframes will all go here, under this Keyframes comment flag. 3:38 So first, I want to create an animation that scales an element from zero to one, 3:44 so I'm going to create a keyframe rule by typing @keyframes. 3:50 And I'm going to name this animation, grow. 3:55 To give me more control over how the animation progresses, 4:00 I'm going to create three keyframes here using percentages. 4:04 So I'm only defining keyframes 4:07 at 0%, 30%, and 60%. 4:13 So that means that at 100%, the browser will animate back to the original 4:21 values for the properties being animated. 4:26 So at 0%, we don't wanna see the element. 4:29 Now an easy way to do that is to set the scale to zero. 4:34 So I need to use the transform property and the scale function, 4:38 and then I'll write 0 as the arguement for scale. 4:43 And at 30%, I'm going to scale the element up to 1.1. 4:48 So again, I'll write a transform property, and 4:53 use the scale function, and I'll define 1.1 as the argument. 4:57 So next at 60%, I'm gonna set the scale to 0.9. 5:02 I'm setting these scale values slightly larger than 1 at the 30% keyframe, 5:13 and below 1 at 60% to make the animation more fluid and realistic. 5:19 Scaling an element beyond, below, 5:24 then back to its original size will give it a sort of bounce effect. 5:27 So to run the animation, 5:31 I need to reference the grow keyframes inside a selector rule. 5:33 So let's apply the animation to the outer, inner, and inline elements. 5:37 So right under the SVG Styles comment flag, I'm going to create 5:43 a new grouped selector rule that targets these three elements. 5:48 So first, I'll target the class outer, 5:52 followed by inner, then inline. 5:58 So now I'm gonna use the animation shorthand property to define all of 6:02 the animation properties in a single declaration. 6:07 So first, I'll reference the grow keyframe sequence and 6:11 give it a one second animation duration. 6:15 And I also wanna give each animation a timing function. 6:18 Now the value ease-out will start the animation at full speed, 6:21 then ease it to a finish. 6:27 Next, I'll need to set the animation fill mode to backwards. 6:29 The backwards fill mode immediately applies the first animation 6:34 keyframe to the element, so the values in the 0% keyframe here. 6:39 That way, we make sure the scaling begins at 0 and 6:44 we don't get any strange jumps in the animation. 6:47 So I wanna give the animations a slight delay so 6:51 that they don't all run at the same time. 6:54 So I’m gonna create a rule that targets the class inner, and 6:57 I’m going to delay its animation with the animation-delay property. 7:02 Now I only want a little bit of delay between the animations, so 7:09 I’ll give this one a value of 0.1 seconds. 7:12 Next, I'm going to target the class inline. 7:17 And for this, I'm going to set animation-delay to 0.15 seconds. 7:23 Finally, let's not forget to define the SVG transform-origin, 7:29 so I need to give each svg element I'm transforming 7:34 a transform-origin property value set to the center. 7:38 Otherwise, the elements will not scale from their center point. 7:42 Now to keep my CSS dry, I'm going to define the transform-origin in 7:46 one place using the universal selector. 7:51 So right below the comment for SVG Styles, I'm going to create a new rule 7:53 that targets the class badge, followed by the universal selector. 7:58 This will target every element inside the badge, and 8:03 apply the transform-origin I'm about to write. 8:07 So as you learned in the previous stage, 8:10 you can set the transform-origin to center, with the value 50% 50%. 8:13 Now to get this exact value in pixels, you can go back to the HTML file and 8:19 look at the cx and cy coordinates for the circle elements. 8:25 So as we can see here in the first circle element, cx and 8:31 cy are both set to 180, so you can use 180 as your pixel value. 8:36 Now I'm sticking with percentages moving forward. 8:42 So let's go back to the browser and check out our animations. 8:46 Once I click the Preview button, we can see how the outer circle scales in first, 8:49 immediately followed by the inner circle and the inline strokes. 8:54 And there's a nice, subtle follow-through effect in the animation that renders 8:59 the movement more fluid and realistic. 9:03 This is done via the scale and animation-delay values, really neat. 9:05 So our animation is looking good, so far. 9:10 In the next video, we're gonna tackle the star animation. 9:13
You need to sign up for Treehouse in order to download course files.Sign up