Html 使用SASS将不同动画应用于具有相同类的元素

想象一下以下HTML结构：

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

现在，我想让它们都实现

shake

动画，但方式不同-第一个div向左/向右移动，第二个div向上/向下移动等-通常，它们都应该具有相同的动画，并进行细微调整。
我使用SASS的

@for

制作了3个不同的动画，但这并不能解决我的问题，因为编译后，具有相同类的所有元素都被赋予相同的动画。
示例：我正在生成3个不同的

shake-1

，

shake-2

，

shake-3

动画，即使我使用SASS函数，也只有一个应用于具有相同类的所有html元素

---

有什么办法吗？

你可以这样做

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

我的班级：第一个孩子{
位置：绝对位置；
动画：shake-1 5s无限；
动画计时功能：线性；
}
.myClass:第n个孩子（2）{
位置：绝对位置；
动画：shake-2 5s无限；
动画计时功能：线性；
}
.myClass:第n个孩子（3）{
位置：绝对位置；
动画：shake-3 5s无限；
动画计时功能：线性；
}

最好的办法是为每个div添加一个额外的类

所以就像：

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

---

你能在这里添加一个片段吗？这个答案将帮助你使用：first child、：nth chil（2）和：nth child（3）…谢谢大家的帮助，我想做得太多了，解决方案非常简单！

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

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