Https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates

HTML-CSS
1

Tell us what’s happening:

how to do it
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-duration: 1s;
  animation-name: twinkle;
}

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

.star-3 {
  margin-top: 10%;
  margin-left: 50%;
  animation-duration: 1s;
  animation-name: twinkle;
}

@keyframes twinkle {
  20% {
    transform: scale(0.5);
    opacity: 0.5;
    animation-duration:1s;
    animation-duration:0.9s;
  }
}

#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>
<div class="star-3 stars"></div>

Your browser information:

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

Challenge: Animate Multiple Elements at Variable Rates

Link to the challenge:

2

Hi, you need to change the animation duration of the star1 to 1s, star 2 to 0.9s and star 3 to 1.1s

1 Like