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