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
tian jin
Courses Plus Student 5,162 PointsI 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
39,021 PointsHi 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?
Best,
Greg
Jon Peterson
12,661 PointsIt 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%
tian jin
Courses Plus Student 5,162 Pointstian jin
Courses Plus Student 5,162 Pointsgot it! thanks!