Animating stroke-dasharray and stroke-dashoffset

Alright, so let me show you how to use the stroke dash array and 0:00 stroke dash offset properties to create line animations. 0:03 So, back in my style sheet, under the key frames comment flag, 0:08 I'm going to create a new key frames rule, and I'll name the animation offset. 0:12 This animation will animate the offset in a path stroke. 0:20 In this rule, I'm only going to define one keyframe. 0:24 A keyframe at 100%. 0:27 At 100%, the stroke dash offset value will be set to zero. 0:29 So, now, to apply this animation to the logo, 0:39 I'll need to reference this offset animation inside the logo rule. 0:41 So in my logo rule I'll add an animation property. 0:46 And I'll call the offset animation. 0:50 I'll set the duration to five seconds and 0:54 I'll add a linear animation timing function. 0:57 Now the linear timing function maintains the same speed from start to end. 1:00 You can add a different timing function if you want. 1:05 Then, I'm going to add a fill mode of forwards. 1:08 And forwards instructs the browser to end the animation on its final key frame. 1:11 It's best to use the forwards fill mode when creating line animations so that when 1:17 the animation ends it won't reset back to the start values and remove the stroke. 1:21 And I'm going to increase the logo stroke dash offset value to 150. 1:27 So it's going to animate the offset from 150 pixels to zero, 1:32 creating more movement. 1:37 All right, so let's have a look at the animation. 1:38 Once I save the style sheet and refresh the browser, we can see how the dashes 1:41 gaps in the stroke animate from a 150 pixel offset to zero. 1:47 So now we're seeing marching ants around the tree house logo. 1:52 So now, to create the line drawing animation, 1:58 I need to define a stroke dash array value that's equal to the path's total length. 2:01 So, how do I get this path's total length? 2:07 Well, I need to test a few values to figure this out. 2:10 So, back in my logo rule, I'm going to comment out the stroke dash offset and 2:14 animation properties while I figure out the value. 2:20 So first, I'm going to try a stroke dash array value, 2:24 of 400, so let me save my style sheet and refresh the page. 2:29 And as we can see it's not quite there. 2:33 It looks pretty neat but the stroke only reveals a small part of the logo. 2:35 So, up next I'll go back and try the value 650. 2:40 We're almost there, so let me go back and try the value, 810. 2:46 Great! 2:51 Looks like that's it. 2:55 So after trying out a few values, 2:57 I figured out that the total length of this path here is 810 pixels. 2:59 Now you can also use java script to get the total length value, 3:05 instead of manually figuring it out with CSS, 3:09 and I've posted a link about that in the teacher's notes. 3:11 So when I set stoke dash array to 810, 3:15 the dash and gap in the stoke are both 810 pixels long. 3:19 So they're as long as the path itself. 3:24 So what your seeing here is an 810 pixel long dash in the stroke. 3:27 Now we can adjust the offset so that the gap covers the entire path. 3:33 And this is how you first hide the dash in the stroke. 3:38 I'll show you what I mean. 3:41 If I go back to my logo rule and uncomment the stroke dash offset property, 3:42 and if I offset it by the same value as stroke dash array, so 3:49 I'll change the value to 810. 3:53 Once I save my style sheet and refresh the page, we no longer see the green 3:56 outline because, instead of the dash we're now seeing the gap in the stroke. 4:01 So, now I'm all set to animate it. 4:06 If I go back to the logo rule and uncomment the animation property, 4:09 this animation sequence will now move the stroke offset from 810 to zero. 4:15 So, once I save my style sheet and refresh the page, 4:21 it creates the illusion that the line is drawing logo. 4:24 Really neat. 4:28 So, what we're actually seeing is the 810 pixel gap 4:29 being offset by the 810 pixel green dash. 4:33 So, as a nice finishing touch I want to animate the path's green 4:38 fill color back in after the line animation ends. 4:43 So, back in my style sheet, up here in my key frames, I'm going to create a new 4:46 key frames rule and I'll name these animation fill-it. 4:52 In the key frame rule, I'll set one key frame at 100% and 4:57 I'm going to add a fill property and set the fill value to 5:03 #6fbc6d, which renders that light shade of green. 5:07 Then back in my logo rule, I'm going to reference the fill-it animation, 5:16 so I'll add a comma after the properties for the offset animation. 5:22 And I'll call fill-it and I'll set the duration to point eight seconds. 5:28 So, to start this fill-it animation right after the line drawing animation, 5:36 I'm going to set the animation delay value to five seconds. 5:41 And then I'll give it an animation fill mode of forwards. 5:46 I'll save my style sheet, and when I go back to the preview and 5:50 refresh, we see the line drawing animation, then after five seconds, 5:53 the logo's fill color fades in. 5:58 Beautiful! 6:00 So, in summary, the main steps for 6:02 creating an animated line drawing are, first, add a stroke to the path. 6:04 Then set the stroke dash array value equal to the path's total length and 6:09 set the stroke dash offset value the same as stroke dash array. 6:15 Then animate stroke dash array back to zero. 6:19