jquery - CSS 动画 - 一个接一个地动画化一个元素

Question

我想先为一个元素设置动画，然后再为另一个元素设置动画，这可以用 CSS 实现吗？我似乎无法让它工作，here是我到目前为止的尝试。我有两个主要问题:

1) 我的动画没有发生。

2)当它确实发生时，它会同时为每个元素设置动画，我想要的是在最后一个元素完成时为下一个元素设置动画。 CSS 有这种能力吗？

3) 我希望它是无限的。

我想我的名字是 3，但我的动画不会播放，所以我无法对其进行测试。我正在尝试制作加载动画，理想情况下我不想使用 JS，因为我认为这会是不好的做法？

Answer 1

您需要为所有元素添加不同的animation-delay。

演示使用 animation-direction: alternate ---> jsbin

@keyframes load {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.e {
  width: 100%;
  height: 30px;
  opacity: 0;
}
.one {
  background: red;
  -webkit-animation: load 5s infinite;
  animation: load 5s infinite;
}
.two {
  background: green;
  -webkit-animation: load 5s infinite 1s;
  animation: load 5s infinite 1s;
}
.three {
  background: yellow;
  -webkit-animation: load 5s infinite 2s;
  animation: load 5s infinite 2s;
}
.four {
  background: pink;
  -webkit-animation: load 5s infinite 3s;
  animation: load 5s infinite 3s;
}
.five {
  background: purple;
  -webkit-animation: load 5s infinite 4s;
  animation: load 5s infinite 4s;
}

<div class="e one"></div>
<div class="e two"></div>
<div class="e three"></div>
<div class="e four"></div>
<div class="e five"></div>