CSS allows you to create animations with transitions and keyframes that once were only possible with JavaScript or Flash. Unfortunately, with CSS there's no mode to perform a callback when an animation is complete. With JavaScript, information technology'due south possible to detect the end of a CSS transition or animation and and so trigger a function.

Separate the roles

Handle the animations (with transitions or keyframes) in your CSS; handle the effect timing and triggers in your JavaScript.

                                  .button                  {                  transition-property                  :                  background-color                  ,                  transform                  ;                  transition-duration                  :                  1.5s                  ;                  transition-timing-function                  :                  linear                  ;                  }                  .animate                  {                  background-color                  :                  red                  ;                  transform                  :                  translateY                  (                  50px                  );                  }                              
                                  $                  (                  ".push button"                  ).                  click                  (                  function                  ()                  {                  $                  (                  this                  ).                  addClass                  (                  "animate"                  );                  });

Detecting and executing when transitions end with jQuery

Using JavaScript, we can detect the transitionend event; all the same for cantankerous-browser, support nosotros need to include the other browsers' prefixes.

Then bind the outcome with jQuery's i function, which ensures that it runs just in one case (it unbinds the issue handler after it runs in one case). (Read more than well-nigh the 1 function)

                                  $                  (                  ".push button"                  ).                  click                  (                  office                  (){                  $                  (                  this                  ).                  addClass                  (                  "animate"                  );                  $                  (                  this                  ).                  one                  (                  "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend"                  ,                  role                  (                  issue                  )                  {                  // Do something when the transition ends                  });                  });

The higher up solution works, merely the problem is, depending on the browser, it tin fire twice (i.e. Chrome supports both webkitTransitionEnd and transitionend)

Here's what the console returns when I log the event in Chrome:

Detect the supported consequence property proper noun

We'll introduce a office, whichTransitionEvent, to discover the supported result property name; assign a variable, in this case transitionEvent, to concord the effect property name; and pass the variable as the commencement argument of the ane function.

                                  // Function from David Walsh: http://davidwalsh.name/css-animation-callback                  function                  whichTransitionEvent                  (){                  var                  t                  ,                  el                  =                  document                  .                  createElement                  (                  "fakeelement"                  );                  var                  transitions                  =                  {                  "transition"                  :                  "transitionend"                  ,                  "OTransition"                  :                  "oTransitionEnd"                  ,                  "MozTransition"                  :                  "transitionend"                  ,                  "WebkitTransition"                  :                  "webkitTransitionEnd"                  }                  for                  (                  t                  in                  transitions                  ){                  if                  (                  el                  .                  way                  [                  t                  ]                  !==                  undefined                  ){                  return                  transitions                  [                  t                  ];                  }                  }                  }                  var                  transitionEvent                  =                  whichTransitionEvent                  ();                  $                  (                  ".button"                  ).                  click                  (                  part                  (){                  $                  (                  this                  ).                  addClass                  (                  "breathing"                  );                  $                  (                  this                  ).                  ane                  (                  transitionEvent                  ,                  role                  (                  event                  )                  {                  // Do something when the transition ends                  });                  });

This ensures that, even in Chrome, the consequence simply fires one time:

Hither's a demo:

Meet the Pen rEpqJ by Jonathan Suh (@jonsuh) on CodePen.

Find when animations (keyframes) end

The above solution tin be slightly tweaked to account for animations washed with keyframes.

Like transitions have the transitionend event, animations have the animationend issue. Nosotros'll take the whichtransitionEvent function and swap out instances of transition for animation (example sensitive).

                                  function                  whichAnimationEvent                  (){                  var                  t                  ,                  el                  =                  certificate                  .                  createElement                  (                  "fakeelement"                  );                  var                  animations                  =                  {                  "blitheness"                  :                  "animationend"                  ,                  "OAnimation"                  :                  "oAnimationEnd"                  ,                  "MozAnimation"                  :                  "animationend"                  ,                  "WebkitAnimation"                  :                  "webkitAnimationEnd"                  }                  for                  (                  t                  in                  animations                  ){                  if                  (                  el                  .                  way                  [                  t                  ]                  !==                  undefined                  ){                  return                  animations                  [                  t                  ];                  }                  }                  }                  var                  animationEvent                  =                  whichAnimationEvent                  ();                  $                  (                  ".button"                  ).                  click                  (                  function                  (){                  $                  (                  this                  ).                  addClass                  (                  "breathing"                  );                  $                  (                  this                  ).                  one                  (                  animationEvent                  ,                  office                  (                  event                  )                  {                  // Do something when the animation ends                  });                  });

Vanilla JavaScript

With Vanilla JavaScript, information technology's slightly trickier. Using the whichTransitionEvent part, demark transitionEvent with addEventListener.

                                  var                  push                  =                  document                  .                  querySelector                  (                  ".button"                  ),                  transitionEvent                  =                  whichTransitionEvent                  ();                  button                  .                  addEventListener                  (                  "click"                  ,                  office                  ()                  {                  if                  (                  push                  .                  classList                  )                  {                  button                  .                  classList                  .                  add                  (                  "breathing"                  );                  }                  else                  {                  button                  .                  className                  +=                  " "                  +                  "animate"                  ;                  }                  button                  .                  addEventListener                  (                  transitionEvent                  ,                  customFunction                  );                  });                  function                  customFunction                  (                  result                  )                  {                  button                  .                  removeEventListener                  (                  transitionEvent                  ,                  customFunction                  );                  // Do something when the transition ends                  }

The second argument must exist a function name as opposed to function({}). This is important because we must unbind the listener, otherwise the listener will keep running, causing it to run multiple times.

These solutions may work in your use instance, but if you're looking for more intricate, complex animations, y'all may desire to look into a library that is feature-rich and offer more power, like GreenSock.