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 Michael Braga
.a{fill-rule:evenodd;}techdegree seal-36
Michael Braga
Full Stack JavaScript Techdegree Graduate 24,174 Points

The opacity property

If look at the CSS for the keyframe turn:

@keyframes turn {
    0% {
        transform: rotate(0) scale(0);
        opacity: 0;
    }
    60% {
        transform: rotate(375deg) scale(1.1);
    }
    80% {
        transform: rotate(355deg) scale(0.9);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

We see that the opacity is set to 0 initially in the keyframes. However, we did not change its opacity value back to 1 in any other keyframe, yet we still see the element's opacity come back to 1 DURING the animation and not at the end of it.

This is the element we applied it on:

.star {
    animation: turn 1.1s .2s ease-out backwards;
}

Since we are using the animation-fill-mode value as backwards, I can understand that the opacity value can comeback to its initial value of 1 at the end of animation but this is not what is being displayed. Anyone know why?

1 Answer

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

The initial valuse of opacity on .star is default to 1. So even though it hasnt explicitely been set, opacity: 1 is the default for all elements. You should declare on the .star class or in the animation where you want the opacity to change.

For instance, setting opacity: 0 on the .star class will set its initial value to 0. The class will then be invisible always until the opacity is set to 1 somewhere (like in the animation keyframe).