animating elements sequentially in pure css3 on loop

Question

I\'m trying to animate in elements sequentially in full css3 animations. Seems the very straight forward answer is using animation delay. However I wanted this in loop, any id

Answer 1

You need to make the animation long enough so that all the elements have a chance to animate before the cycle starts again.

In this example, your 4th element only starts animating after 2 seconds. The transition itself is going to take another second, and then you might want a bit of a pause, say another second, before you reanimate the first element. So that's 4 seconds in total.

So you might want something like this: -webkit-animation: Fadein 4s infinite linear.

But you'll also need to adjust the keyframe percentages, dividing each of them by 4, since you still want the transition itself to take only 1 second.

@-webkit-keyframes FadeIn { 
  0% { opacity:0; -webkit-transform:scale(.1);}
  21.25% {opacity:1; -webkit-transform:scale(1.05);}
  25% {-webkit-transform:scale(1); }
}

Fiddle example