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.