Question

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

1）我的动画没有发生。

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

3）我希望它是无限的。

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

Answer 1

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

使用animation-direction: alternate进行演示---＆gt; jsbin

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

由于你在问题上有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)

Answer 3

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

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

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

for $c in doc('C:\...\pelis.xml')//pelicula[director[starts-with(., 'A')]]
return <pelicula>{
    $c/titulo
}</pelicula>

HTML应如下所示：

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

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

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

注意：请务必更换＆＃34;供应商＆＃34;在CSS中使用适用的供应商前缀（webkit，moz等）

有关更多文档，请参阅此处： https://github.com/daneden/animate.css/

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

3 个答案: