Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Michael Braga
seal-mask
PLUS
.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,650 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).