Unable to chain animations

Question

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;
            }
`

Daniel Fehrm · Answer

Problem
However when I preview it will only show the second animation and skips the first one.
Cause
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. 
Solution
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:
```css
.star:nth-of-type(1){
  animation-delay: .5s, 1.8s;
}
.star:nth-of-type(2){
  animation-delay: 0s, 1.5s
}
.star:nth-of-type(3){
  animation-delay: .8s, 2s;
}
```
Conclusion
Animations can not animate the same property at the same time, Delays must be applied in order for all animations to work.

Welcome to the Treehouse Community

Looking to learn something new?

ld82

ld82

Unable to chain animations

1 Answer

Daniel Fehrm

Daniel Fehrm

Problem

Cause

Solution

Conclusion