html - 使用 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 向左/向右移动，第二个移动顶部/底部等 - 通常它们都应该具有相同的动画，并进行细微的调整。
我已经到了使用 SASS 制作了 3 个不同动画的地步，@for但这并不能解决我的问题，因为在编译后，具有相同类的所有元素都被赋予了相同的动画。
示例：我正在生成 3 个不同shake-1的 , shake-2,shake-3动画，即使我制作 SASS 函数，也只有其中一个应用于具有相同类的所有 html 元素。

关于如何解决这个问题的任何想法？

标签： htmlcsssass

Answer 1

你可以这样做...

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