CSS3 Chain Animations

Solution 1:

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.

Solution 2:

While I was looking for the same thing, without the usage of something like jQuery, I came up with the same idea of chaining, by listening to webKitanimationEnd, as suggested by others. This way you could use CSS for the transitions and for the timing of the animation.

You could create an array as a queue, and add the element you want to animate to it (with some options like effect and animation type). Then, you could process this queue by going to the next animation when an animation ends. This animation could be either a different element or an subsequent animation to the same element. Remember to remove the animation class from the className when the animation ends. For each step, just add the appropriate CSS classes and then remove them when the animation is finished. Because we listen to animationEnd, the timing can be done with CSS only, leaving just the processing to JavaScript.

This is such a minimal task that if your project isn't already using a library like jQuery, you should just use Vanilla JS.

I did some research and managed to put something together. See this fiddle for an example:

var manager = new AnimationManager();
manager.enqueue(animations).animate();

The final product is on my github repo.

Hope this provides you with some insight/help.