CSS3 Chain Animations

Question

I have a series of animations that I need to perform on some text, and I was planning on using CSS3. My plan is to have some text that slowly moves down the screen and afte

Answer 1

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.