Enable Animate.css only when object is clicked

Question

How to add the animation effect only when the object is clicked? I’m already using animations with Animate.css, but I’d like the effect to start only when I click above. How to do this?

Answer 1

You don’t need to put an entire, relatively heavy library like jQuery just to use Animate.css

just add the classes with .className to the desired element, and use the events webkitAnimationEnd, mozAnimationEnd, MSAnimationEnd, oanimationend and animationend (events for old and new browsers, to maintain compatibility) to detect when animation is over

Example when clicking on H1:

var foo = document.querySelector('#foo');

foo.addEventListener('click', function () {
    foo.className = 'animated bounce';
});

foo.addEventListener('webkitAnimationEnd', removeClass);
foo.addEventListener('mozAnimationEnd', removeClass);
foo.addEventListener('MSAnimationEnd', removeClass);
foo.addEventListener('oanimationend', removeClass);
foo.addEventListener('animationend', removeClass);

function removeClass()
{
   foo.className = '';
}

h1 {
    color: #f35626;
    background: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48pt;
    text-align: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<h1 id="foo">Stack Overflow</h1>

example when clicking another element:

var foo = document.querySelector('#foo');
var botao = document.querySelector('#animar');

botao.addEventListener('click', function () {
    foo.className = 'animated bounce';
});

foo.addEventListener('webkitAnimationEnd', removeClass);
foo.addEventListener('mozAnimationEnd', removeClass);
foo.addEventListener('MSAnimationEnd', removeClass);
foo.addEventListener('oanimationend', removeClass);
foo.addEventListener('animationend', removeClass);

function removeClass()
{
   foo.className = '';
}

h1 {
    color: #f35626;
    background: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48pt;
    text-align: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<h1 id="foo">Stack Overflow</h1>

<button id="animar">Animar</button>

Answer 2

With jQuery, you can add the Animated.css class into a function click.

Edit. In the documentation there are some methods to check the end of the animation, and so includes in the answer this option so that the user can click and make the animation whenever he wants (thanks to Mr. @dvd for his help)

Take the example

$(document).ready(function () {
$(".box").on("click", function(){
    var box = $(this);
    var classes = "animated wobble";
    box.addClass(classes)
    .on("animationEnd oAnimationEnd mozAnimationEnd webkitAnimationEnd", function(){
        box.removeClass(classes);
    });
});
});

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.box {
 cursor: pointer;
 display:inline-block;
 }

<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <div class="box">
        <img src="http://placecage.com/100/100">
    </div>