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

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.

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

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