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

Tell us what’s happening:
Describe your issue in detail here.

in Animate Elements at Variable Rates
I’m confused about the relationship between .stars and star-1 (and also star-2)
it seems that star-1 and 2 are dependant on the existence of .stars because if I remove it, stars-1 and 2 disappear. but nothing seems to be linking them.
can someone explain how star-1 and 2 use the object described in .stars to animate?

many thanks in advance
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;
  }
}

#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/91.0.4472.77 Safari/537.36

Challenge: Animate Elements at Variable Rates

Link to the challenge:

Well, this has made me think when I was solving the problem. So,the answer is that .stars class has the dimension and border and animation-iteration-count description for the div’s it applies to.
The other thing is that .star-1 and .star-2 classes only have the margin and animation-name and duration description.

The point is that the animation and the dimensions are the things which connect the 3 classes, also these apply to the two same div’s.

Hope you see what I mean.

Yes, I think it’s starting to make sense.
also similarly in these two examples below:

<div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
</div>

anything in id=“box-container” applies to box-1 and 2 because they are within the box-container div, is that correct?

1 Like

That’s correct. You are getting the hang of it. Keep coding. And come back here anytime. Cheers.

Also, in the freecodecamp code, the two different divs have the same class applied to them, yet they are not inside a main container div, still they share properties.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.