CODEWITHSUNDEEP
jquerycss
panthro
panthro

Reputation: 24061

Chaining CSS3 animations?

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.

Upvotes: 2

Views: 113

Answers (1)

fmsf
fmsf

Reputation: 37137

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.
});

Upvotes: 1

Related Questions