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!

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 CSS - Beyond the Basics CSS Animation Basics Using % Values in Keyframe Rules

I don't get it, what's the meaning to set 30%,60% both to width:50% ?

@-webkit-keyframes slide { 0% { width: 0%; } 30%, 60% { width: 50%; } 70%{ width: 80%; } 100%{width: 100%;} }

2 Answers

Greg Kaleka
Greg Kaleka
39,021 Points

Hi Tian,

The point of having percentages as key frames lets you choose some specific points in the animation to set, and let the animation engine do the rest of the work.

Essentially, what you're doing by giving two values to one width is making the animation pause from 30% of the allocated time (of 2s) to 60% of the allocated time. Through that whole span of time, the width of your progress bar will be 50% of the total width, and then the animation will continue.

Make sense?



got it! thanks!

Jon Peterson
Jon Peterson
12,661 Points

It is saying that at 30 and 60 percent of the way through the animation that the width will remain at 50% where at 70 percent of the way through the animation the width will be at 80%