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 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.

any takers? :D the answer of @sonu-joshi is incorrect

chriz
– chriz

2013-04-29 10:26:25 +00:00
Commented Apr 29, 2013 at 10:26 — chriz
– chriz, Commented Apr 29, 2013 at 10:26

James Holderness · Accepted Answer · 2013-04-30 01:47:04Z

6

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

answered Apr 30, 2013 at 1:47

James Holderness

23.1k2 gold badges43 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chriz Over a year ago

this actually works, can you explain the math behind it, if the transition itself is 1 second why is the delay at .5second interval?

James Holderness Over a year ago

Those times are based on the numbers you used. The second block starts animating 0.5s after the first block (which is still busy animating). The third block starts animating another 0.5s later - 1s after the first block - so just as it finishes.

Mithil Mohan Over a year ago

I tried this method still the animation executes only once. Please help me stackoverflow.com/questions/51854155/…

Collectives™ on Stack Overflow

animating elements sequentially in pure css3 on loop

Edit

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related