Animating Elements Sequentially in Pure CSS3 on Loop

animating elements sequentially in pure css3 on loop

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

How to loop a set of animations ie each row bouncing once in css animations?

.detail-container .row {  -webkit-animation-name: bounce;  animation-name: bounce;  -webkit-transform-origin: center bottom;  -ms-transform-origin: center bottom;  transform-origin: center bottom;  -webkit-animation-duration: 8s;  animation-duration: 8s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;  animation-iteration-count: infinite;  -webkit-animation-iteration-count: infinite;}
@keyframes bounce {  0%,  2.498%,  6.623%,  9.996%,  12.499% {    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }  4.996%,  5.372% {    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);    -webkit-transform: translate3d(0, -30px, 0);    transform: translate3d(0, -30px, 0);  }  8.75% {    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);    -webkit-transform: translate3d(0, -15px, 0);    transform: translate3d(0, -15px, 0);  }  11.248% {    -webkit-transform: translate3d(0, -4px, 0);    transform: translate3d(0, -4px, 0);  }}
.detail-container .row:nth-child(2) {  animation-delay: 1s;}
.detail-container .row:nth-child(3) {  animation-delay: 2s;}
.detail-container .row:nth-child(4) {  animation-delay: 3s;}
.detail-container .row:nth-child(5) {  animation-delay: 4s;}
.detail-container .row:nth-child(6) {  animation-delay: 5s;}
.detail-container .row:nth-child(7) {  animation-delay: 6s;}
.detail-container .row:nth-child(8) {  animation-delay: 7s;}

<div class="detail-container">  <div class="row">1</div>  <div class="row">2</div>  <div class="row">3</div>  <div class="row">4</div>  <div class="row">5</div>  <div class="row">6</div>  <div class="row">7</div>  <div class="row">8</div></div>

Chain/sequence animation in CSS

As others have suggested, use animation-delay to offset each element's animation.

In order to loop the entire group, multiply the animation duration by the number of elements and change your keyframes accordingly. Below, I've multiplied the animation duration by three and divided the keyframe percentages by three.

If you have a large number of elements or they are added dynamically, you may want to consider using JavaScript, as mentioned here.

a {  padding: 6px;  display: block;  width: 50px;  font-size: 17px;  margin: 10px auto;  border: 2px solid;  text-decoration: none;  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);  animation: pulse 6s infinite;}
.btn-100 {  animation-delay: 0s;}.btn-500 {  animation-delay: 2s;}.btn-1250 {  animation-delay: 4s;}
@keyframes pulse {  0% {    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);  }  23.333% {    -moz-box-shadow: 0 0 0 10px rgba(255, 208, 0, 0.2);    box-shadow: 00 0 0 10px rgba(255, 208, 0, 0.2);  }  33.333% {    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);  }}

<a class="btn-100" href="#">100</a><a class="btn-500" href="#">500</a><a class="btn-1250" href="#">1250</a>

Avoiding absolute positioned elements from jumping on animations in chrome for mac

Simply add -webkit-backface-visibility: hidden; to the <body> and the jumping should stop.

Any time you have minor glitches when using CSS Transforms, backface-visibility: hidden will straighten things out. It typically has to do with how the browser will handle hardware acceleration.

From CSS3 Animations: the Hiccups and Bugs You'll Want to Avoid:

The reason behind this phenomenon is unclear, but the fix is pretty simple. Simply adding the -webkit-backface-visibility: hidden; rule to your CSS should help prevent the problem. Apply it to the container of the element, like so:


.container {
-webkit-backface-visibility: hidden;
}


It boils down to another hardware acceleration problem - using this property simply kicks the acceleration into gear. You could also use things like -webkit-perspective: 1000; or other 3D properties.

CSS3 Chain Animations

There are several ways to chain the animations - there's the pure CSS way, using -webkit-animation-delay, where you define multiple animations and tell the browser when to start them, e.g.

-webkit-animation: First 1s, Second 2s;
-webkit-animation-delay: 0s, 1s;
/* or -moz etc.. instead of -webkit */

Another way is to bind to the animation end event, then start another. I've found this to be unreliable, though.

$('#id')
  .bind('webkitAnimationEnd',function(){ Animate2() })
  .css('-webkit-animation','First 1s');

The third way is to set timeouts in Javascript and change the css animation property. This is what I use most of the time, as it is the most flexible: you can easily change the timing, cancel animation sequences, add new and different ones, and I've never had a fail issue like I have binding to the transitionEnd event.

$('#id').css('-webkit-animation','First 1s');
window.setTimeout('Animate2("id")', 1000);
function Animate2....

It's more code than a bind, and more than CSS, of course, but it's relable and more flexible, imho.

---

Related Topics