CSS Animations with delay for each child element

Here's a scss way to do it using a for loop.

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

What you want is the animation delay property.

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.myClass img {
  float: left;
  margin: 20px;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}

.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }

<div class="myClass">
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
</div>

A CSS preprocessor such as Less.js or Sass can reduce the amount of repetition, but if you're working with an unknown number of child elements or need to animate a large number then JavaScript will be the best option.

In the [hopefully near] future when attr and calc are fully supported, we'll be able to accomplish this without JavaScript.

HTML:

<ul class="something">
    <li data-animation-offset="1.0">asdf</li>
    <li data-animation-offset="1.3">asdf</li>
    <li data-animation-offset="1.1">asdf</li>
    <li data-animation-offset="1.2">asdf</li>
</ul>

CSS:

.something > li
{
    animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}

This would create an effect where each list item animates in what would appear to be random order.

You can also make use of the transition-delay property in CSS and use JS or JQuery to assign a different delay for each child element . ( Assume s to be the starting delay in seconds )

$(".myClass img").each(function(index){
     $(this).css({
          'transition-delay' : s*(1+index) + 's'
     });
 });

So, the children will have the transition delays like 1*s, 2*s, 3*s ..... and so on. Now to create the actual animation effect simply set the required transition and the children will be animated in a sequence. Works like a charm !

If you have a lot of items (for example: I have paginated table with >1000 items and wanna each row to be animated with delay when page is loads), you can use jQuery to solve this and avoid css file rising in size. Animation delay dynamically increases.

$.each($('.myClass'), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));

});

EDIT: Here is the same code I adjusted to use with animate.css (install additional plugin before use https://gist.github.com/1438179 )

$.each($(".myClass"), function(i, el){
    $(el).css("opacity","0");
    setTimeout(function(){
       $(el).animateCSS("fadeIn","400");
    },500 + ( i * 500 ));

});

Where "fadeIn" is animation type, "400" - animation execute time, 500 - delay for each element on page to be animated.

CSS Animations with delay for each child element

Related

Recent Posts