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 after it gets to a certain part of the screen, certain words will be highlighted and eventually the text will continue moving down the screen and disappear making room for further text.

My question is, what is the best way to "chain" these animations. Should I have one animation for moving down the screen, a separate animation for highlighting the text and a third animation for moving down the rest of the screen? Then, should I set an animation delay to only start the second and third animations once the prior animations have completed? I think I'm fine with creating the separate animations that will be chained together, but I'm not sure how these animations should trigger the next animation to begin.

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

Answer 2

Was just building a chain of animations in Chrome 16 using the "right" - and most general - way: firing the second animation on webkitAnimationEnd, with the animations defined by keyframes referenced from a class rule that defines the animation-* variables, and triggered by adding the class name to the target elements. This is "right" because it defines all timing intervals relatively, one time, because it's the most flexible (e.g. each animation can involve separate elements, which you can't do within one keyframe), and because it maximizes leveraging CSS3.

It failed. Fixed it by removing the classname of the completed transition before firing the next one!

Answer 3

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.