CSS动画 - 逐个元素进行动画效果

Question

我想要通过CSS依次对一个元素、另一个元素和再另一个元素进行动画，这是否可行？我似乎无法让它工作。在这里是我的尝试。

我有两个主要问题：

1）我的动画没有发生。

2）即使它发生了，它也会同时对每个元素进行动画处理，但我希望在上一个元素完成后再对下一个元素进行动画处理。CSS是否已具备此类功能？

3）我希望它可以无限循环播放。

我认为我提到了三个问题，但我的动画不会播放，因此我无法测试它。我正在尝试制作一个加载动画，理想情况下，我不想使用JS，因为我认为这将是一种不好的做法。

- Udders

---

据我所知，在CSS中没有回调函数可以让您找出动画何时完成，从而开始下一个动画。 - Billy

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>

- Weafs.py

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

注意：请务必用相应的厂商前缀（webkit，moz 等）替换 CSS 中的“vendor”。

如需更多文档，请参考以下链接： https://github.com/daneden/animate.css/

- Syed

---

应该被接受为答案。这个解决方案更快、更漂亮。 - Julien Le Coupanec

@JulienLeCoupanec 从技术上讲，这只是CSS3动画。这可以在没有库的情况下完成，因为库还有其他动画的CSS，加载额外代码只是为了动画一些东西。做weafs.py所说的事情是一样的。只需减少持续时间以加快速度即可。 - Lisa

Answer 3

由于您在问题中使用了jQuery标签，我提供了一种基于jQuery的方法。如果您需要无限制的方法，我认为这种方法更加简洁。 这是示例代码。

我将 display:none; 添加到了您的 e 类中：

.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)

针对评论进行编辑：

在使用 infinite（无限循环）时要小心。你可能需要添加一个 clearTimout() 调用，以便在不再需要执行时停止它。这是更新后的 js 代码（更新的 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)

- Michael Humelsine

---

这看起来非常简洁，我想老实说我会选择使用jQuery解决方案。我该如何使这个循环无限循环？ - Udders

根据您的评论更新了答案。 - Michael Humelsine