Animate Elements at Variable Rates - question

Tell us what’s happening:
I got the expected result from this module, however, one thing is unclear for me.
I understand star-1 and star-2 classes are referencing to twinkle-1 & twinkle-2 animations respectively by linking their animation names.

But how is the stars class connected to star-1 and star-2 classes? It doesn’t set a property to a specific animation style, and only thing I can assume is the order of styles defined in <div class="star-1 stars"></div> - so it applies star-1 first then stars following after.

Removing either stars or star-1 in <div class="star-1 stars"></div> wouldn’t work and I’d like to know why.

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/76.0.3809.100 Safari/537.36.

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

the class .stars is applied to both elements, in this way those line of codes are written only once instead of being repeated twice (once in star-1 and once in star-2)

the two classes are complementary

I get that, but why isn’t .stars working alone? Suppose I don’t have those twinkle effect and just have <div class="stars"></div>, then this doesn’t appear on screen. .stars class seems working only with those animation effects, and why is that?

The #back element is in front of the two divs, if you give it z-index: -1 you can see the .stars elements (the circles). The reason why you can see the elements when they are being animated is that both the transform and opacity creates a new stacking context.

Thanks lasjorg and it’s interesting to know more about z-index related to transform style.

Yes, it’s one of those things you just learn about along the way. Stacking contexts can be a bit tricky at times.

Hy,
You use three different class, named:

  1. stars
  2. star-1
  3. star-2

There is no any connection between the classes at all.
Just simple use on the elements like stars used the second and third -div- element, but star-1 used only on second -div-. If you don’t use anywhere else the star-1 or star-2 class you can also change it and use id:

<div id="star-1" class="stars">
<div id="star-2" class="stars">

and in the

#star-1 {
...
}
#star-2 {
...
}

Anyway you can use as many class to style an elements as you want. There is no relationship between the multiple classes…

I think you missed the point.

Without the animation the elements are behind the background so it look like they don’t “work” without the animation classes. It is simply a matter of z-index/stacking context.

1 Like