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

CSS Animating SVG with CSS Keyframe and Line Drawing Animations Finishing the Animation Sequence

Posted by MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Keyframes 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
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

If 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
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Sorry 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
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Not "next position" but specifically the end (100%) position. If you create any other positions, they won't have the default setting..

MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

Thank 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
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The default only applies to 0% (from) and 100% (to). Defaults are not applied to other steps (like 80%).

MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

OK, thank you so much