CSS动画 - 使一个元素一个接一个地动画 [英] CSS animation - animate one element after another

问题描述

我想让一个元素动画，然后另一个，然后另一个，这是可能与CSS？我似乎无法正常工作，这里是我的尝试远。
我有两个主要问题：

1）我的动画不发生。


2）当它发生时，它将同时对每个元素进行动画处理，我想要的是当最后一个元素完成时对下一个元素进行动画处理。 CSS有这种能力吗？


3）我想要它是无限的。

我想我的名字为3，但我的动画不会播放，所以我不能测试它。我试图做一个加载动画，理想情况下我不想使用JS，因为我认为这将是坏的做法。

解决方案

因为你有jQuery标签上的问题，我提供一个jQuery的方法。我认为如果你想要无限的方法是更清洁。 这里是小提琴。

我添加了显示：没有;到您的e类：

  .e {display：none;} 
  pre> 
 
 
并使用立即调用函数表达式（IIFE）来处理由jQuery选择器提供的元素集合 $（'。e'） 。
 （function（$）{
（function fadeNext（collection）{
 collection.eq（0）.fadeIn（1000，function（）{
（collection = collection.slice（1））。length 
& fadeNext（collection）
 }）; 
}）（$（'。e'））
}）（jQuery）
  
 
 b $ b 
编辑以回应评论：
 
 
 
小心无限。你可能想添加一个clearTimout（）调用，在你认为不再需要之后停止执行。这是更新的js代码（更新的小提琴）：
 （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 $ b}，duration * clearAfter）; 
}）（jQuery）
  
 
I wanting to animate one element then another then another, is this possible with CSS? I can't seem to get it working, here is my attempt so far.
I have two major problems:

1) My animation does not happen. 
 

2) When it does happen, it will animate each element at the same time, what I wanting is animate the next element when the last has finished. Does CSS have this kind of capability yet? 
 

3) I want it to be infinite.

I think I have name 3, but my animation wont play so I cannot test it. I am trying to make a loading animation, ideally I dont want to use JS as I assume this would be bad practice?
解决方案
Since you have the jQuery tag on the question I'm providing a jQuery approach.  I think it is cleaner if you want infinite approach.  Here's the fiddle.

I added display:none; to your e class:
.e {display:none;}
And use an Immediately Invoked Function Expression (IIFE) to process the collection of elements supplied by the jQuery selector $('.e').
(function($){
    (function fadeNext(collection){
        collection.eq(0).fadeIn(1000, function(){
            (collection=collection.slice(1)).length 
            && fadeNext(collection)
        });
    })($('.e'))
})(jQuery)
Edit in response to comment:

Be careful with infinite.  You probably want to add a clearTimout() call you stop execution after you deem it is no longer necessary.  Here is the updated js code (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)


                        
这篇关于CSS动画 - 使一个元素一个接一个地动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！