Edit in JSFiddle

var animationSpeeds = {
  'tada': 1000,
  'tadaSmall': 1000,
  'flash': 500,
  'shake': 400,
  'pulseUp': 250,
  'pulseDown': 250,
  'popIn': 250,
  'popOut': 250,
  'fadeIn': 200,
  'fadeOut': 200
};

function animateEl(element, animation, complete)
{
  if (!element instanceof jQuery || !$(element).length || !animation) return null;
  
  if (element.data('animating')) {
    element.removeClass(element.data('animating')).data('animating', null);
    element.data('animationTimeout') && clearTimeout(element.data('animationTimeout'));
  }
  
  element.addClass('animated-' + animation).data('animating', 'animated-' + animation);
  element.data('animationTimeout', setTimeout((function() { element.removeClass(element.data('animating')).data('animating', null); complete && complete(); }), animationSpeeds[animation]));
}
<button onclick="animateEl($('#target'), 'tada')">Tada</button><br>
<button onclick="animateEl($('#target'), 'tadaSmall')">Tada Small</button><br>
<button onclick="animateEl($('#target'), 'flash')">Flash</button><br>
<button onclick="animateEl($('#target'), 'shake')">Shake</button><br>
<button onclick="animateEl($('#target'), 'pulseUp')">Pulse Up</button><br>
<button onclick="animateEl($('#target'), 'pulseDown')">Pulse Down</button><br>
<button onclick="animateEl($('#target'), 'popIn')">Pop In</button><br>
<button onclick="animateEl($('#target'), 'popOut')">Pop Out</button><br>
<button onclick="animateEl($('#target'), 'fadeIn')">Fade In</button><br>
<button onclick="animateEl($('#target'), 'fadeOut')">Fade Out</button>

<div id="target"></div>
/* Element CSS */

#target {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  background: #7d0;
  box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, .2), inset -1px -1px 0 0 rgba(0, 0, 0, .05);
}

/* Animation CSS */

[class^="animated-"],
[class*=" animated-"] {
  animation-fill-mode: both;
}

@keyframes tada {
  0% {transform: scale(1);}
  10%, 20% {transform: scale(0.8) rotate(-4deg);}
  30%, 50%, 70%, 90% {transform: scale(1.2) rotate(4deg);}
  40%, 60%, 80% {transform: scale(1.2) rotate(-4deg);}
  100% {transform: scale(1) rotate(0);}
}

.animated-tada {
  animation: tada 1s;
}

@keyframes tadaSmall {
  0% {transform: scale(1);}
  10%, 20% {transform: scale(0.9) rotate(-2deg);}
  30%, 50%, 70%, 90% {transform: scale(1.1) rotate(2deg);}
  40%, 60%, 80% {transform: scale(1.1) rotate(-2deg);}
  100% {transform: scale(1) rotate(0);}
}

.animated-tadaSmall {
  animation: tadaSmall 1s;
}

@keyframes flash {
  0%, 50%, 100% {opacity: 1;}  
  25%, 75% {opacity: 0;}
}

.animated-flash {
  animation: flash .5s;
}

@keyframes shake {
  0%, 100% {transform: translateX(0);}
  20%, 60% {transform: translateX(-6px);}
  40%, 80% {transform: translateX(6px);}
}

.animated-shake {
  animation: shake .4s;
}

@keyframes pulseUp {
  0% {transform: scale(1);}
  50% {transform: scale(1.15);}
  100% {transform: scale(1);}
}

.animated-pulseUp {
  animation: pulseUp .25s;
}

@keyframes pulseDown {
  0% {transform: scale(1);}
  50% {transform: scale(0.85);}
  100% {transform: scale(1);}
}

.animated-pulseDown {
  animation: pulseDown .25s;
}

@keyframes popIn {
  0% {transform: scale(0);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

.animated-popIn {
  animation: popIn .25s;
}

@keyframes popOut {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(0);}
}

.animated-popOut {
  animation: popOut .25s;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.animated-fadeIn {
  animation: fadeIn .2s;
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.animated-fadeOut {
  animation: fadeOut .2s;
}