animating elements sequentially in pure css3 on loop

问题

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 ideas how to make the animation loop infinitely?

I found this fiddle on a similar question. Basically that's the same logic but I just wanted it looped.

This was the similar [question] (https://stackoverflow.com/a/8294491/340888)

Was using this:

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

.myClass img { float: left; margin: 20px; 
    -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }

Edit

Just to be clear, I want the animation in a sequential manner, say after the first one animates, it animates the 2nd item, then 3rd.. and so on. I'm thinking about animating around 10 to 12 elements. So they'll animate one after another.

So @Sonu Joshi's answer is incorrect.

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