<div id="box" class="box"></div>
<div id="buttons">
  <button class="button" data-animation="bounce">Bounce</button>
  <button class="button" data-animation="wobble">Wobble</button>
  <button class="button" data-animation="shake">Shake</button>
  <button class="button" data-animation="tada">Tada</button>
  <button class="button" data-animation="pulse">Pulse</button>
</div>
html, body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  
  width: 100%;
  height: 100%;
}

.box {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 75px;
  height: 75px;
  margin: 20px;
  border: 1px solid #999;
  text-transform: capitalize;
}
const box = document.getElementById('box')
const buttons = document.querySelectorAll('.button')

function animateBox (e) {
  const button = e.target
  box.className = `
    box 
    animated 
    infinite 
    ${button.dataset.animation}`
  box.textContent = button.dataset.animation
}

for (const button of buttons) {
  button.addEventListener('click', animateBox)
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.