JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<button data-animation="bounce">Pular</button>
<button data-animation="pulse">Pulsar</button>
<button data-animation="fadeInLeftBig">Aparecer</button>
<button data-animation="fadeOutRightBig">Desaparecer</button>
<button data-animation="flip">Girar</button>

<div id="circulo"></div>

CSS

body {
    text-align: center;
}

#circulo {
    border-radius: 50%;
    margin: 50px auto;
    width: 50px;
    height: 50px;
    background-color: #93d0ea;
}

JavaScript

var botao = document.querySelectorAll("button"),
    circulo = document.querySelector("#circulo");

// Primeiro, temos de acrescentar uma classe de animação para o nosso objeto, de modo a biblioteca poder reconhecê-lo.

circulo.classList.add('animated');

// Vamos iterar sobre todos os nossos botões e adicionar eventos para cada um.

for (var i = 0; i < botao.length; i++) {

    // Define uma função anônima, para torná-lo possível usar a variável i.

    (function (i) {

        botao[i].addEventListener('click', function () {

            // To start an animation you just have to add a specific class to the object.
            // In our case we stored the classes' names in the data-animation attribute of each button.

            var animation = botao[i].getAttribute('data-animation');

            circulo.classList.add(animation);

            // To make it work more then once we have to remove the class after the animation is complete.

            window.setTimeout(function () {

                circulo.classList.remove(animation);

            }, 1000);

        });

    }(i));

}