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>

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 中的“vendor”替换为适用的供应商前缀（webkit、moz 等）

更多文档可以参考这里： https://github.com/daneden/animate.css/

Answer 3

由于您在问题上有 jQuery 标签，因此我提供了一种 jQuery 方法。如果你想要无限的方法，我认为它更干净。 Here's the fiddle.

我添加了 display:none;到你的电子课：

.e {display:none;}

并使用立即调用函数表达式 (IIFE) 来处理由 jQuery 选择器 $('.e') 提供的元素集合。

(function($){
    (function fadeNext(collection){
        collection.eq(0).fadeIn(1000, function(){
            (collection=collection.slice(1)).length 
            && fadeNext(collection)
        });
    })($('.e'))
})(jQuery)

根据评论进行编辑：

小心无限。您可能想添加一个 clearTimout() 调用，在您认为不再需要后停止执行。这是更新的js代码（updated fiddle）：

(function($){

    var el = $('.e');
    var animationLength = 1000;
    var duration = el.length * animationLength + animationLength;
    var clearAfter = 100;
    var animation;

    function fadeNext(collection){
        collection.eq(0).fadeIn(animationLength, function(){
            (collection=collection.slice(1)).length 
            && fadeNext(collection)
        });
    }

    function play(){
        fadeNext(el);
        animation = setTimeout(function(){
            el.hide();
            play();
        }, duration);
    }
    play();

    setTimeout(function(){
         clearTimeout(animation);   
    }, duration * clearAfter);
})(jQuery)