Preview
Video Player
00:00
00:00
Animating stroke-dasharray and stroke-dashoffset
6:30In this video, you will learn how to use the stroke-dasharray and stroke-dashoffset properties to create line animations.
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