Animating elements sequentially in pure css3 on loop

Question

I am trying to animate in elements sequentially in a complete css3 animation. It seems a very direct answer is to use animation delay. However, I wanted this in a loop, any ideas how to make the animation loop endlessly?

I found this fiddle on a similar issue. In principle, the same logic, but I just wanted it to go in cycles.

It was a similar [question] ( https://stackoverflow.com/a/166778/ )

Used 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

To be clear, I want the animation to be consistent, say, after the first animation, it animates the second element, then the third ... and so on. I am thinking of animating about 10-12 elements. Therefore, they will animate one after another.

So @Sonu Joshi's answer is incorrect.

Answer 1

You need to make the animation long enough so that all the elements have the opportunity to animate before the start of the cycle.

In this example, your 4th element starts the animation after 2 seconds. The transition itself will take another second, and then you may need a little pause, say another second, before you reanimate the first element. So just 4 seconds.

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

But you will also need to adjust the percentage of key frames by dividing each of them into 4, since you still want the transition 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); } } 

Script example

Answer 2

Pretty simple. Use -webkit-animation: FadeIn 1s infinite linear;

Demo