CSS animation - animate one element after another

Question

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?

Answer 1

I know this is old ticket, but I hope my answer may help someone.

If you are okay to use css plugin then use this: https://daneden.github.io/animate.css/

Keep handy custom CSS for delay and use accordingly like this:

.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 should look something like this:

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

Here is few additional control to use with animation.css

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

Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)

For more documentation you can refer here: https://github.com/daneden/animate.css/

Answer 2

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)

Answer 3

You need to add different animation-delay to all elements.

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