Help me im a noob

HTML-CSS
1

Tell us what’s happening:

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

#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 Challenge: Animate Multiple Elements at Variable Rates

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

2

whats the relationship between .stars and .star-1 and .star-2

i know .star is only the shape, and .star-1 and .star-2 are the same shape but placed in diferent locations.

does star code? … f*ck now i understand the 3 div elements have .star and .star-x on its class, it means each div has the same shape but diferent location.
but why is " animation-iteration-count: infinite; " on .star and not on .start-x? because its easy to just modify in 1 class? thas what i think.

3

No clue what your problem is, but is think by the exercise and your solution:

Set the animation-duration of the elements with the classes star-1 , star-2 , and star-3 to 1s, 0.9s, and 1.1s, respectively.

4

star is for all stars, star-1, star-2 and star-3 did something different from star.

5

You have to change the animation-duration according to the description of the problem :blush:

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

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

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

having a stars class is to avoid duplicate coding so whatever would be the same on the star-x classes is instead written for the stars class, and whatever needs to differ is put in the star-x classes
an element is changed by all the css rules in selectors that target it, so it works totally fine having stuff in different classes

7


Im not understanding what IS FUCKING WRONG