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 Christin Lepson
Christin Lepson
24,269 Points

Why do we need to specify "transform: scale(1);" for the 0% and 100% keyframes of the 'grow' animation?

Why do we need to specify "transform: scale(1);" for the 0% and 100% keyframes of the 'grow' animation? Why can't we just write one keyframe for the 50% animation? I tried this and it doesn't work, but I'm not sure why. For example: 

@keyframes grow {
    50% {
        transform: scale(1.15) rotate(-5deg);
        fill: #fdf097;
        opacity: 1;
    }
}

1 Answer

Steven Parker
Steven Parker
243,331 Points
Steven Parker
Steven Parker
243,331 Points

I think I'd need to see the rest of the CSS and also the HTML. I tried guessing at the missing parts, but it does work for me. There must be something about the other code that's causing it to not work as-is.