CSS3 Chain Animations

by

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.

More Related Contents:

  1. How to have multiple CSS transitions on an element?
  2. css3 animation on :hover; force entire animation
  3. CSS Animations with delay for each child element
  4. CSS3 animation with gradients [duplicate]
  5. CSS3 Continuous Rotate Animation (Just like a loading sundial)
  6. How to create a pulse effect using -webkit-animation – outward rings
  7. How To Sync CSS Animations Across Multiple Elements?
  8. IE10 – CSS animation not working
  9. How to make moving CSS objects like this?
  10. Change Background Color & Font Color Automatically Via CSS [closed]
  11. How to fade animate background images (full size) [closed]
  12. CSS3 Rotate Animation
  13. Can you control GIF animation with Javascript?
  14. How do I re-trigger a WebKit CSS animation via JavaScript?
  15. How to build simple jQuery image slider with sliding or opacity effect?
  16. How can I transition width of content with width: auto?
  17. How to have css3 animation to loop forever
  18. Simple CSS Animation Loop – Fading In & Out “Loading” Text
  19. CSS ONLY Animate Draw Circle with border-radius and transparent background
  20. CSS transition auto height not working [duplicate]
  21. CSS Animation onClick
  22. CSS transform origin issue on svg sub-element
  23. matplotlib save animation in gif error
  24. Javafx : How can I produce an animation with 3D path?
  25. CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d workaround
  26. Reuse CSS animation in reversed direction (by resetting the state?)
  27. AngularJS css animation + done callback
  28. CSS3 equivalent to jQuery slideUp and slideDown?
  29. In JavaFX how do I move a sprite across the screen?
  30. How to make an animation with CSS in JavaFX?

Leave a Comment