CSS动画-一个接一个的动画

Question

我想先动画一个元素然后再动画另一个元素，CSS可以做到吗？我似乎无法正常工作，这是到目前为止的尝试。我有两个主要问题：

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>

Answer 2

我知道这是旧票，但我希望我的回答可以帮助别人。

如果你可以使用 css 插件，那么使用这个： https: //daneden.github.io/animate.css/

保留方便的自定义 CSS 以进行延迟并相应地使用，如下所示：

.anim-delay-500ms   { animation-delay: 0.5s }
.anim-delay-1000ms  { animation-delay: 1s }
.anim-delay-1500ms  { animation-delay: 1.5s }
.anim-delay-2000ms  { animation-delay: 2s }

HTML 应该看起来像这样：

<div class="animated fadeInDown anim-delay-500ms">First Content</div>
<div class="animated fadeInDown anim-delay-1500ms">Second Content</div>
<div class="animated fadeInDown anim-delay-2000ms">Third Content</div>
<div class="animated fadeInDown anim-delay-2500ms">Fourth Content</div>

这里有一些与animation.css一起使用的附加控件

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

注意：请务必将 CSS 中的“供应商”替换为适用的供应商前缀（webkit、moz 等）

有关更多文档，您可以参考此处： https://github.com/daneden/animate.css/