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 The Animation Challenge Solution

2,401 Points

Unable to chain animations

I am trying to chain two animations and am confounded at why this behaviour is being displayed. I have tried googling and searching online but cannot find out why.

I have two keyframe animations: rise & rotate. I am applying these to the .stars class. However when I preview it will only show the second animation and skips the first one.

.star { animation: rise .5s ease-in forwards, rotate .5s ease-in forwards }

I have worked out that it seems to be the comma that is disabling the code. For example if I only one of the animations on it's own it works fine - if I add the comma on the end it disables it. What am i missing here? This seems like a small snag but i'm not sure why it's happening? I'm watching the solutions video and Guil is doing this exact same thing yet it's working for him. Here is the full code. Thanks.

`/* -------------------------- Keyframes --------------------------- */

@keyframes rise { 0% { transform: translateY(100%); }

50% { transform: translateY(-10%); }

65% { transform: translateY(10%); }

100% { transform: translateY(0%); } }

@keyframes rotate { 0% { transform: rotate(0deg); }

50% { transform: rotate(5deg) scale(1.1); opacity: .8; }

100% { transform: rotate(0deg); } }

/* -------------------------- SVG Styles --------------------------- */

.stars * { transform-origin: 50% 50%; }

.star { animation: rise .5s ease-in forwards, rotate .5s ease-in forwards; } `

1 Answer


However when I preview it will only show the second animation and skips the first one.


This happens because you can not apply two or more animations to the same property at the same time. When this is the case, the browser only shows the last animation declared.


To be able to show both animations you need to apply an animation-delay to the animations (in this case we only need to apply it to the rotate animation). The simplest way to make both animaitons work would be just to put a 0.5 second delay on the rotate animation. However that will make the stars animate at the same time and the project requires the stars to be animated one after one. so we need more specific delays.

Guil adds these delays to all three stars in the video by using the nth-of-type() selector on each of the stars:

  animation-delay: .5s, 1.8s;

  animation-delay: 0s, 1.5s

  animation-delay: .8s, 2s;


Animations can not animate the same property at the same time, Delays must be applied in order for all animations to work.