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 trialMIHA W.LEE
PHP Development Techdegree Graduate 25,452 PointsKeyframes and animation
Hi, I watched the video from the keyframes course, but there is one thing i dont know, the course set the 0% position to opacity 0, then after that it doesnt set opacity to 1.
I just wonder when you set the opacity to 0 at first, that means the rest of action will also be opacity 0. But after 0%, the star start to appear.(I mean the stars opacity equals to 1).
So hope you guys can help me out, thank you so much!
1 Answer
Steven Parker
231,198 PointsIf a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element's existing styles for the start/end states.
Since the default value for opacity is 1, by specifying 0 as the 0% setting, the animation will transition from 0 to 1 as it runs.
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 PointsMIHA W.LEE
PHP Development Techdegree Graduate 25,452 PointsSorry for the late reply, so it means when you set the opacity to 0 at position 0%, then after that the opacity at next position will automatically change opacity from 0 to 1, right? Is that what you want to say?
By the way, thank you so much!!
Steven Parker
231,198 PointsSteven Parker
231,198 PointsNot "next position" but specifically the end (100%) position. If you create any other positions, they won't have the default setting..
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 PointsMIHA W.LEE
PHP Development Techdegree Graduate 25,452 PointsThank you so much! You mean when the star transform from 0% to 80% it appears opacity to 0, right? When it becomes 100%, it will change from opacity 0 to 1? Do you mean like that?
Steven Parker
231,198 PointsSteven Parker
231,198 PointsThe default only applies to 0% (from) and 100% (to). Defaults are not applied to other steps (like 80%).
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 PointsMIHA W.LEE
PHP Development Techdegree Graduate 25,452 PointsOK, thank you so much