How to animate CSS with a delay between an unknown number of elements

Question

I'm a beginner in CSS Animations.

I have many itens in a row (using bootstrap - then the number of elements is different for each resolution)

<div class="row IconAnimate">

   <div class="col-xs-12 col-sm-4 col-lg-2">
     <div><i class="fa fa-trademark fa-3x"></i>
       <h4><strong>TITLE 1</h4>
       <p>BLA BLA BLA</p>
    </div>
   </div>

   <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
   </div>  

</div>

With this I have rows with 6, 3 and 1 element. (col-xs-12, sm-4 and lg-2) - ok?

each row have a SCROLL down animation (created by the "animation-element side-left")

In other words, if I scroll down the browser, the row will be animated.

Until now - NO PROBLEM.

Now I want to ANIMATE THE ICON (in this case the "FA-TRADEMARK" icon)

with a FadeIn animation.

But..

MY PROBLEM:

How I can animated EACH ICON with a delay of 3s between each icon?

I got this:

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

.IconAnimate i { animation: FadeIn 1s linear; animation-fill-mode:both; }
.IconAnimate i:nth-child(1){ animation-delay: 3s }
.IconAnimate i:nth-child(2){ animation-delay: 6s }
.IconAnimate i:nth-child(3){ animation-delay: 9s }
.IconAnimate i:nth-child(4){ animation-delay: 12s }

But with this code I got the animation, but, I need to know How many itens I have in the row.

Is there a way to make the animation if I dont know how may elements I will have in each row?

THE JSFIDDLE: https://jsfiddle.net/mydjnfLn/

u may want to use javascript? – sorrow poetry May 22 '16 at 06:05 — sorrow poetry, May 22 '16 at 06:05
@vahid hi! yes, no problem with javascript! but how.. :D – DANIEL May 22 '16 at 07:12 — DANIEL, May 22 '16 at 07:12

score 3 · Accepted Answer · answered May 22 '16 at 07:36

Solution 1: jQuery without CSS

You can use jQuery's animate and delay functions to achieve this, it's quite simple, here's the code:

$('.IconAnimate i').each(function(i) {
  $(this).css('opacity', 0);
  $(this).delay(1000 * i).animate({
    'opacity': 1.0
  }, 450);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="row IconAnimate">

  <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-trademark fa-3x"></i>
      <h4><strong>TITLE 1</h4>
      <p>BLA BLA BLA</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
  </div>

</div>

Of course this is just an example, I leave it to you to figure out what properties you have to animate and how to get the desired effect.

Solution 2: jQuery/pure javascript and CSS animations

A, in my opinion, more versatile solution would be to use a CSS class to enable the animation and dynamically add this class to your i elements via javascript. While you can use jQuery for this if you'd like, you don't have to, the code is simple enough to do it using pure javascript:

function animateNext() {
  var elements = document.querySelectorAll('.IconAnimate i:not(.show)');
  if (elements.length) {
    elements[0].classList.add('show');
    setTimeout(animateNext,1000);
  }
}

animateNext();

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

.IconAnimate i {opacity:0;}
.IconAnimate i.show { opacity:1;animation: FadeIn 1s linear; animation-fill-mode:both;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="row IconAnimate">

  <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-trademark fa-3x"></i>
      <h4><strong>TITLE 1</h4>
      <p>BLA BLA BLA</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
  </div>

</div>

PS: For demonstration purposes, I set the delay to just one second in both examples, just replace 1000 by 3000 to get 3 seconds.

hi @mmgross first of all, tks for your time! I test solution 2 (because its more simple to test here) - Its Works 99% ok. I just dont know why the fadein effect comes from right (I dont know if I was clear....) the zoom in comes from right to center - and not center to center.. - https://jsfiddle.net/mydjnfLn/2/ And I will test solution 1 now! tks a lot! — DANIEL, May 22 '16 at 08:19
hi @mmgross I test solution 1 too - Works 100% fine! great! but - if I understand the solution, the CSS control dont Works here, right? It's a problem for me because FadeIn is a simple animation - and as a beginner I understand the logic of JS FadeIn - but with CSS I can create more flexible animations like bounce, flip, infinite animations, alternate.. — DANIEL, May 22 '16 at 08:32
1. You have an unclosed ``-tag in your code, but that's not the problem. 2. jsfiddle has some own styles defined for class `.show`, that is messing with my code. If you run the code snippet above you'll see that it works. If you want to play around in jsfiddle with that code, rename `.show` to something else (twice in js, once in css) — mmgross, May 22 '16 at 08:36
yes! I see the code snippet.. I'm trying directly on my Project right now.. — DANIEL, May 22 '16 at 08:37
hi @mmgross! GREAAAAAAT! I test direcly on my site code and Works 100%!! Solution 2 is the best option - because - as you said it's more flexible to work. I have now only 1 problem to solve.. the first animation is starting too soon (because I had another animation on all div - a side left effect to move all div from left to center) - If I put a set timeout before animateNext() this can delay the function to start? tks a lot!! — DANIEL, May 22 '16 at 08:57
Glad I could help. As for the initial delay: You're absolutely right, you can achieve that by replacing the last line of my code by `setTimeout(animateNext,500);` (or whatever time you need before you start the animation). — mmgross, May 22 '16 at 14:42

mrfour · Answer 2 · 2018-05-09T14:53:01.087

I found some problems in your JSFiddle, and made some changes.

Fixed JSFiddle

HTML Part

<div class="row">
   <div class="IconAnimate col-xs-12 col-sm-4 col-lg-2">
     <div><i class="fa fa-trademark fa-3x"></i>
     <h4><strong>TITLE 1</strong></h4>
       <p>BLA BLA BLA</p>
    </div>
   </div>

   <div class="IconAnimate col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
   </div>  
</div>

CSS Part

.IconAnimate i { animation: FadeIn 1s linear; animation-fill-mode:both; }
.IconAnimate:nth-child(1) i { animation-delay: 1s }
.IconAnimate:nth-child(2) i { animation-delay: 2s }
.IconAnimate:nth-child(3) i { animation-delay: 3s }
.IconAnimate:nth-child(4) i { animation-delay: 4s }

The following are problems I found:

It seems that you missed the the end tag of the strong tag, that caused ":nth-child" cannot work properly
.IconAnimate i:nth-child(1), this selector selects every i element that is the first child of its parent instead of i element of the first .IconAnimate element. So your animate always trigger together with 3s delay.

tks @mrfour - you are right! tks a lot for your help!! – DANIEL May 22 '16 at 08:58 — DANIEL, May 22 '16 at 08:58

Tanvi B · Answer 3 · 2016-05-22T06:27:38.883

0

I was having same issue I did it in below way

$.each($('.IconAnimate '), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));
//add delay 3s 
i+3000;
});

edited May 22 '16 at 06:27

answered May 22 '16 at 06:10

Tanvi B

1,577
11
14

Hi @Tanvi-B, tks! but for some reason, this script dont Works for me. All elements had the animation (ok) - but, I dont have the 3s delay. All animations occurs at same time. – DANIEL May 22 '16 at 06:22
Can you try my edited function i have added delay of 3 s by incrementing i+3000 – Tanvi B May 22 '16 at 06:28
no.. same problem.. no delay..I tryed some variations.. but no delay too.. If I put in CSS the: .IconAnimate i:nth-child(1){ animation-delay: 3s } with the respective element number and delay - its Works fine. (then the CSS is good). but, with the js.. all elements are animated togheter.. with no delay.. – DANIEL May 22 '16 at 06:34

How to animate CSS with a delay between an unknown number of elements

3 Answers3

Solution 1: jQuery without CSS

Solution 2: jQuery/pure javascript and CSS animations