No Github do daneden ensina como fazer isso usando jQuery.
Exemplo:
$.fn.extend({
animateCss: function(animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
return this;
}
});
/*
setInterval(function() {
$('.p1').animateCss('bounce');
$('.p2').animateCss('pulse');
}, 3000);
*/
$(".p2").addClass('hide');
$(".btnFlip").click(function () {
$('.p1').toggleClass('hide').animateCss('bounce''flipOutX');
$('.p2').toggleClass('hide').animateCss('flipInX');
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br>
<button class="btnFlip">Click</button>
Você pode criar uma function do jQuery para simplificar todo o processo, nesta do exemplo animateCss()
recebe o nome do efeito como parâmetro. Por dentro da function ela aguarda toda a animação acabar para remover as propriedades da mesma e assim rodar novamente.
Você pode definir também um setInterval()
para disparar a animação de tempos em tempos.