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

Posted by Gemz Nunn
Gemz Nunn
16,296 Points

[SVG Animation Sequence] Why is the star fading in rather than spinning?

I've gone through my code line by line and I cannot figure out why the star is fading in, rather than spinning. I've compared it against the code in the download pack, but cannot see anything different. (Maybe I've been staring at it too long!)

Here's a link to the animation on CodePen: https://codepen.io/gemznunn/pen/wZwbMe

The code I used is below:

@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);
    }
}

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

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

I saw another question where you suggested that there should be no space between "scale" and the following parenthesis. It looks like that same suggestion would apply here. :wink:

Gemz Nunn
Gemz Nunn
16,296 Points

I think it's the way it's formatted on the community board as there are definitely no spaces between scale and () in my code.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

I did find those spaces in the codepen.

And when I removed them, the spinning effect started working.

Gemz Nunn
Gemz Nunn
16,296 Points
Gemz Nunn
Gemz Nunn
16,296 Points

Scratch that - I'm a numpty. There are spaces. D'OH! Definitely been looking at this code for too long! Thanks Steven! :D