Finishing the Animation Sequence7:01 with Guil Hernandez
In this video, you will complete the badge animation by creating the star animation keyframes.
Okay, so let's continue building the animation sequence 0:00 by creating the key frames that will scale and rotate the star element. 0:03 So, back in my style sheet, right beneath the grow key frames, 0:08 I'm going to define a new @keyframes rule, and I'll name this animation turn. 0:13 Inside the key frame rule, I'm going to create four key frame selectors. 0:22 So first, I'll create one at 0%, then I'll create one at 60%. 0:26 I'll create another one at 80% and 0:32 finally, I'll create one at 100% for 0:38 this animation, I want to animate the elements opacity, scale, and rotation. 0:43 So first, inside this 0% key frame, I'm going to add a transform property, 0:48 then I'll use the rotate function and set rotate to zero. 0:54 Then I'll set scale to zero. 0:59 And I also want to start with zero opacity. 1:02 So I'll include the opacity property and set the value to zero. 1:05 So now I can set the rotation degrees and scale sizes in the next three key frames. 1:10 So I want to rotate the start element 360 degrees in this animation. 1:16 So first, at 60%, I'll define a transform property, 1:20 and I'll set rotate to 375 degrees. 1:26 Then I'll use the scale function to set the scale to 1.1. 1:30 So right below at 80%, I'm going to include a transform property, 1:36 and a rotate function, and I'm going to set the rotation to 355 degrees. 1:42 And then, I'll set the scale to 0.9. 1:50 Once again I'm slightly overshooting the final rotate and 1:54 scale values then going below them to give them that realistic bounce effect. 1:58 Finally, at 100%, I'll add a transform property and 2:04 then I'll define a rotation of 360 degrees, and a scale of 1. 2:11 All right, so now let's give the start element this new turn animation. 2:19 So, right below, in my SVG styles, 2:25 I'm going to create a new rule that targets star. 2:28 Inside the star rule, I'll add an animation property. 2:35 Then I'll reference that turn keyframe rule. 2:38 I'll set the animation duration to 1.1 seconds. 2:41 Then I'll set the animation delay to 0.2 seconds. 2:45 I'll also give this a timing function of ease-out. 2:49 And once again, I'm going to apply a backwards fill mode. 2:53 This will immediately apply the first animation keyframe when the page loads. 2:56 All right? So, let's have a look at our animation. 3:01 I'll save the style sheet, and go back to my preview. 3:02 And once I refresh, we see the star fade in, while rotating a full 360 degrees. 3:05 Then it eases to a halt. 3:12 Neat. 3:14 So now we have four out of the five animations complete. 3:16 Now, the final animation is a pulsing circle effect and the stars five points. 3:19 So, back in my style sheet, under my keyframe I'm going to create 3:26 a set of keyframes named pulse. 3:31 And I'm only gonna define one key frame in this rule. 3:38 A keyframe at 50%. 3:41 Then, I'll add a transform property, and 3:43 set the scale to 1.4, so that it's slightly higher than 1. 3:47 So in this keyframe rule, I don't need include keyframes for 0% or 100%. 3:54 Because at 0%, the animation will use the elements initial 3:59 scale value then animate to the scale value here at 50%. 4:04 And then back to the initial value at 100%. 4:08 So it saves me the effort of having to write the start and 4:11 end properties inside the keyframe rule. 4:14 So next, in my SVG styles, 4:17 I'm going to target the circle elements inside .star by creating a new rule 4:20 that targets the .star class and it's descendent, circle elements. 4:26 Inside the rule I'll add an animation property. 4:31 And I'm going to call the pulse animation. 4:34 I'll set the animation duration to .7s and the delay to 1.5s. 4:37 So when I save my stylesheet and preview the animation in the browser, 4:44 notice how all five circles in the star pulse at the same time. 4:49 Now, to make this animation sequence a little more interesting I want to stagger 4:55 the pulsing animations so that they don't all animate at the same time. 5:00 I can create this effect by using the nth-of-type selector 5:05 to apply different animation delays to each circle. 5:09 So I'm going to create a new selector that targets star. 5:12 Followed by a descendant circle element, and I'm going to write nth-of-type. 5:18 So, nth-of-type will specifically target a circle element, 5:27 based on its position inside the star element. 5:31 Now the first circle doesn't need a delay. 5:35 So I want to start the delay on the second circle element. 5:38 So I'm going to pass 2 as the nth-of-type argument. 5:41 So inside this rule, I'll add an animation-delay property. 5:46 And set the value to 1.6s. 5:50 So next, to animate the third, fourth, and fifth circle elements, I can simply copy 5:54 this rule here, paste it below, and I'll change this to nth-of-type(3), and 6:00 I'll delay the third circle by 1.7 seconds. 6:06 I'll paste another one right below, and I'll change it to nth-of-type 4 and 6:12 I'm going to delay the 4th one by 1.8 seconds. 6:18 Finally, I'll create one for the fifth circle element. 6:23 And I will delay this one by 1.9 seconds. 6:27 So now, when I save my style sheet, and refresh the browser. 6:36 You can see how the different animation delays stagger at the pulsing circles. 6:40 Cool. 6:44 So there you have it. 6:47 The full animation sequence is complete. 6:48 We created multiple animations for one SVG element by breaking the sequence 6:51 down in two parts, then writing key frames and animation styles for each part. 6:56 Nice work. 7:01
You need to sign up for Treehouse in order to download course files.Sign up