Chaining CSS3 animations?

Question

I'm adding a number of different classes to different objects on my page to animate them.

I add them using addClass with jquery upon page load.

I was wondering if there was a way to chain this, so I could add the first .animate class to my first element and when that's done, add the next .animate class to another element.

fmsf · Accepted Answer · 2013-05-05 12:58:15Z

1

Best you can do is detect the end of a css3 transition, and have some logic to change the classes so the next transitions apply.

$("#foo").on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function(){
      if($(this).hasClass('transition1'){
           $(this).removeClass('transition1').addClass('transition2');
      }
      // apply whatever logic you want to handle the transition chaining.
});

answered May 5, 2013 at 12:58

fmsf

37.2k49 gold badges155 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Chaining CSS3 animations?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related