Animate Elements at Variable Rates

HTML-CSS
1

Tell us what’s happening:

What’s 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 {
    20% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

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

@keyframes star-1 {
    50% {
      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/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/animate-elements-at-variable-rates

3 Likes
2

What isn’t working as expected? What tests are failing? What are the different solutions you have tried? What were their results?

3

Please try to read the challenge carefully.

“Alter the animation rate for the element with the class name of star-1 by changing its @keyframes rule to 50%.”

It means you should find the keyframe name in the class name of star-1 which is its keyframe name is twinkle-1

So, you just need to change,

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

Please try to read the challenge carefully. @bluebird008

“Alter the animation rate for the element with the class name of star-1 by changing its @keyframes rule to 50%.”

It means you should find the keyframe name in the class name of star-1 which is its keyframe name is twinkle-1

So, you just need to change,

image

1 Like
5

Hi m thanks I got the solution already

1 Like