Applying different animation to the element with same class with SASS

Question

Imagine the following HTML structure:

<div class="myClass" />
<div class="myClass" />
<div class="myClass" />

Those divs represent an object, that has this SASS:

.myClass {
  position: absolute;
  animation: shake 5s infinite;
  animation-timing-function: linear;
}

Now, I would like all of them to implement shake animation, but in a different way - first div to move left/right, second to move top/bottom etc - generally all of them should have same animation with minor tweaks.
I've come to a point where I made 3 different animations using SASS's @for but that doesn't solve my problem, because after compilation, all elements with same class are being given the same animation.
Example: I'm generating 3 different shake-1, shake-2, shake-3 animations, and even if I make SASS function, only one of them is applied to all html elements with same class.

Any ideas on how to approach this?

This answers will help you https://stackoverflow.com/questions/26986129/play-multiple-css-animations-at-the-same-time — Eng_Farghly, Oct 03 '18 at 05:23
you can use :first-child , :nth-chil(2) and :nth-child(3) for that... — ElusiveCoder, Oct 03 '18 at 05:23
thank you everybody for your help, I've wanted to overdo this, and the solution was simple enough! — Lovs, Oct 03 '18 at 06:36

score 2 · Accepted Answer · answered Oct 03 '18 at 05:27

You can do it like this...

<div class="myClass" />
<div class="myClass" />
<div class="myClass" />

.myClass:first-child {
  position: absolute;
  animation: shake-1 5s infinite;
  animation-timing-function: linear;
}
.myClass:nth-child(2) {
  position: absolute;
  animation: shake-2 5s infinite;
  animation-timing-function: linear;
}
.myClass:nth-child(3) {
  position: absolute;
  animation: shake-3 5s infinite;
  animation-timing-function: linear;
}

score 0 · Answer 2 · answered Oct 03 '18 at 05:32

Best bet is to add an extra class to each div.

So it's like:

<div class="myClass shake-lr"></div>
<div class="myClass shake-tb"></div>
<div class="myClass shake-dia"></div>

And then in your css/sass:

.myClass
  position: absolute
  animation-timing-function: linear
.shake-lr 
  animation: shake-1 5s infinite
.shake-tb
  animation: shake-2 5s infinite
// ... and so on

Applying different animation to the element with same class with SASS

2 Answers2