Javascript CSS动画几个div一个接一个

我有7个div元素（作为一个100x100），我希望每个盒子一个接一个地旋转——因此，当第一个旋转完成时，下一个开始。最好的情况是这种情况将永远持续下去。但我不知道该把它放在哪里。我在问我是否可以在一个语句中，而不是在这么多行中，进行动画延迟。动画本身可以按照我的要求工作，但我对自己编写代码的方式并不满意。有没有更简单的方法

这是我的代码：

div{
利润率：24px；
宽度：50px；
高度：50px；
浮动：左；
背景：#0f9；
动画：旋转4s立方贝塞尔（.84、.13、.40、.96）；
}
@关键帧旋转{
0% {
变换：旋转（0圈）；
}
100% {
变换：旋转（7圈）；
}
}
.二{
动画延迟：4s；
}
.三{
动画延迟：8秒；
}
.4{
动画延迟：12秒；
}
.5{
动画延迟：16秒；
}
.6{
动画延迟：20秒；
}
.7{
动画延迟：24秒；
}

---

假设您有这样的html：

<div id="divs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

1的想法。三,。方法基本上是相同的，但是使用js，如果需要，可以支持动态div数。它们都从元素中删除了类名，因此它可能会更干净，并避免将来出现一些问题（例如，您希望在第二个和第三个div之间插入另一个div，或者切换div元素的顺序）。 2的想法。您可以使用内联样式在每个元素上附加不同的css延迟持续时间

---

此外，还有其他东西，如css预处理器（如注释中所述！）或js库中的css，它们可以实现这一点。

最终不需要sass，因为js是公平的游戏；）

以下是我的建议：

仅当元素具有附加类（在我的示例中为“run”）时才启动动画

在第一个元素中添加“run”

为添加一个侦听器

如果结束的动画是相关动画

a。从元素中删除“run”类

b。获取下一个同级（即通过nextElementSibling属性）或第一个元素（如果这是最后一个元素）

c。将“run”类添加到同级元素

下面是这个逻辑的一个实现

函数同步（animationName）{
函数animationEnd（事件）{
console.log（event.animationName）；
如果（event.animationName===animationName）{
const el=event.target；
el.类列表。删除（“运行”）；
if（el.nextElementSibling）{
el.nextElementSibling.classList.add（“run”）；
}else if（el.parentElement&&el.parentElement.children&&el.parentElement.children[0]）{
el.parentElement.children[0].classList.add（“运行”）；
}
}
}
addEventListener（'animationend'，animationend，true）；
const firstEl=document.querySelector（“.hi”）；
如果（第一个）{
firstEl.classList.add（“run”）；
}
}

（使用我自己的动画，因为我基于一个不同问题的解决方案：p+它看起来很酷）

---

最后，这里是一个。

你是在问如何让动画一次又一次地循环吗？我是在问我是否可以编写.two{animation delay}，three。{anim..例如，在一条语句中，而不是在那么多行中。动画本身可以按照我的要求工作，但我对编写代码的方式不满意。div的数量是常量吗？您是否在避免sass，或者可以使用它（因为它可能使动态情况下的定义更容易）？@salia_in_red，除非你使用预处理器，我很确定它尽可能紧凑。@MosheJonathanGordonRadian sass当然完全可以：）是的，对于这个项目，div的数量是恒定的！

export default function App() {
  return (
    <div className="items">
      {[1, 2, 3, 4, 5].map((n, idx) => (
        <div className="item" style={{ animationDelay: `${idx * 4}s` }} />
      ))}
    </div>
  );
}