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 trialgoshgarhuseynov
Front End Web Development Techdegree Student 10,873 PointsWhat does @keyframes 0%, 30%,... mean?
Does it mean 0% , 30% of animation duration time? or something else? thanks
2 Answers
goshgarhuseynov
Front End Web Development Techdegree Student 10,873 PointsThanks 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.
Steven Parker
231,269 PointsYou got it! The percentages are of the total animation duration.
So 0% is equivalent to "from", and 100% is the same as "to".
Gregory Simileer
UX Design Techdegree Graduate 19,003 PointsGregory Simileer
UX Design Techdegree Graduate 19,003 Pointsyea didnt even know what those percentages meant.