how to wait for css transition to finish before applying next class

Question

I\'m trying to get text to \"swing\", by applying a rotation transition one way, followed by a rotation the next way, when hovered over. However, it doesn\'t wait for the fi

Answer 1

How about just apply one class with the jQuery, then let CSS do the rest. You can use percentage of time in keyframes to determine what happens throughout the animation. Like so:

@keyframes name {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-20deg); }
  100% { transform: rotate(360deg); } }
@-o-keyframes name {
  0% { -o-transform: rotate(0deg); }
  50% { -o-transform: rotate(-20deg); }
  100% { -o-transform: rotate(360deg); } } 
@-moz-keyframes name {
  0% { -moz-transform: rotate(0deg); }
  50% { -moz-transform: rotate(-20deg); }
  100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes name {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(-20deg); }
  100% { -webkit-transform: rotate(360deg); } }

Answer 2

Each browser has its own event that you can use to detect transition end, just bind like this :

$(".yourClass").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() {
         //doSomething
    });

Answer 3

For css3 transitions with jquery I suggest using jquery.transit. It provides a jquery.animate like api and callbacks that would work in your case.