Applied Visual Design: Animate Elements at Variable Rates

HTML-CSS
1

I changed the animation to 50% only for the element with class of star-1, but I still cannot progress.
What have I done wrong?

Your code so far


<style>
.stars {
  background-color: white;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  animation-iteration-count: infinite;
}

.star-1 {
  margin-top: 15%;
  margin-left: 60%;
  animation-name: twinkle-1;
  animation-duration: 1s;
}

.star-2 {
  margin-top: 25%;
  margin-left: 25%;
  animation-name: twinkle-2;
  animation-duration: 1s;
}

@keyframes twinkle-1 {
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}

@keyframes twinkle-2 {
  20% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}

#back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36 Edg/86.0.622.58.

Challenge: Animate Elements at Variable Rates

Link to the challenge:

2

You’ve changed it for the star-2 element, if you fix that it passes the challenge.

3

It’s still not working…

4

I just kept refreshing and it eventually worked? weird.