Применение различной анимации к элементу с одинаковым классом с помощью SASS

Question

Представьте себе следующую структуру HTML:

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

Эти div представляют объект, который имеет этот SASS:

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

Теперь я хотел бы, чтобы все они реализовали shake анимация, но по-другому - первый div для перемещения влево / вправо, второй для перемещения вверх / вниз и т. д. - как правило, все они должны иметь одинаковую анимацию с небольшими изменениями.
Я пришел к точке, где я сделал3 разных анимации с использованием SASS @for, но это не решает мою проблему, потому что после компиляции всем элементам одного класса присваивается одинаковая анимация.
Пример: я генерирую 3 разных shake-1, shake-2, shake-3 анимации, и даже если я сделаю функцию SASS, только одна из них будет применена ко всем html-элементам с одинаковым классом.

Есть идеи, как к этому подойти?

Answer 1

Лучше всего добавить дополнительный класс к каждому div.

Итак, это как:

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

А потом в вашем 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

Answer 2

Вы можете сделать это так ...

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