How to add an animation to each of the same class separately

https://jsfiddle.net/a1vmx7q3/

If I want to add a separate fan spin to each <div class="fan"> individually, how would I do that?

So that 1 animation of 4s doesn’t get used on every single one of the fan svg’s all at the same time.

Is that even something that is possible to do?

        <div class="fan">
          <svg width="70%" height="70%" viewBox="76 130 381 381">
            <use href="#fan" />
          </svg>
.fan svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
  animation: fan-spin 4s linear;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

You can change the animation-duration for each by adding a new class and just specifying the animation duration.

<div class="fan fan2"> etc...

.fan.fan2 svg {animation-duration:2s}

You can’t change anything in the keyframe for .fan2 without creating a whole new keyframe with a new animation name.

1 Like

For some odd reason only 1 fan is appearing on the screen.

Also, .slide should be used on the other 5 videos.

When the button is clicked, the fan should turn.

My attempt: Only 1st fan spins. https://jsfiddle.net/n32du4hk/

Whatever you had me do made all the other fans invisible except for the 1st fan.

.fan.fan1 svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
  animation: fan-spin 4s linear;
  animation-iteration-count: 4;
}

/* added */
.fan2 svg {
  animation: fan-spin 4s linear;
  animation-iteration-count: 4;
}
.fan3 svg {
  animation: fan-spin 4s linear;
  animation-iteration-count: 4;
}

.fan4 svg {
  animation: fan-spin 4s linear;
  animation-iteration-count: 4;
}

.fan5 svg {
  animation: fan-spin 4s linear;
  animation-iteration-count: 4;
}

.fan6 svg {
  animation: fan-spin 477s linear;
  animation-iteration-count: 47;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

Like this:

.fan svg,
.fan2 svg,
.fan3 svg {
  position: absolute;
  top: 0;
    left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
  animation: fan-spin 4s linear;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.slide .fan svg {
  animation-duraton: 4s;
  animation-iteration-count: 5;
}

.slide .fan2 svg {
  animation-duraton: 10s;
  animation-iteration-count: 20
}

.slide .fan3 svg {
  animation-duraton: 5s;
  animation-iteration-count: 30
}
1 Like

If I would want them to all be set as the same, how would I do that?

This did not work.

.slide .fan.fan1.fan2.fan3 svg {
  animation: fan-spin  linear;
  animation-duration: 10s;
  animation-iteration-count: 20;
}
.fan svg,
.fan1 svg,
.fan2 svg,
.fan3 svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.slide .fan.fan1.fan2 svg {
     
  animation: fan-spin  linear;
  animation-duration: 10s;
  animation-iteration-count: 20;
}

Like this then?

.slide .fan svg,
.slide .fan1 svg,
.slide .fan2 svg,
.slide .fan3 svg  {
  animation: fan-spin  linear;
  animation-duration: 10s;
  animation-iteration-count: 20;
}

Yes.

Think what you are asking. You should know by now how to target elements with your css as you have done this thousands of times now.

The above CSS would mean you had html like this:

<div class="slide">
... 
  <div class="fan fan1 fan2 fan3"> ...  </div>

Your last example though is correct.

.slide .fan svg,
.slide .fan1 svg,
.slide .fan2 svg,
.slide .fan3 svg  {
  animation: fan-spin  linear;
  animation-duration: 10s;
  animation-iteration-count: 20;
}
1 Like

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