Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Keyframe and Line Drawing Animations Finishing the Animation Sequence

What does @keyframes 0%, 30%,... mean?

Does it mean 0% , 30% of animation duration time? or something else? thanks

2 Answers

Thanks Steven, unfortunately instructor does not explain that. I can see that here the video lectures are getting worse as topics become more advanced. The SVG is great tool, but the video-lectures should be revisited and revised. For example instructor does not explain the following: stroke-dasharray: 300,10,20,5,100; stroke-dashoffset: 160; It is very simple but i spent 2 hours to search it on the web and came to conclusion:

  • basically, it draws line=300-160= 140px, then gap(space)=10px, then line=20px, gap=5px, line=100px. Then starts from beginning line=300px, gap=10px ...line=100px, and again starts circling line=300px, gap=10px,..., line=100px until it makes full figure in <svg> of .html file. Notice that offset is been subtracted only from first line drawing (line=300-160=140px) in first circling, but the rest lines and circlings is as in stroke-dasharray, w/o offset, i.e. w/o stroke-dashoffset=160px.

yea didnt even know what those percentages meant.

Steven Parker
Steven Parker
231,198 Points

You got it! :+1: The percentages are of the total animation duration.

So 0% is equivalent to "from", and 100% is the same as "to".