Efeitos de animação com a lib Animate.css

Animate.css é uma biblioteca CSS de pequenas animações com vários efeitos interessante para dar destaques em elementos da nossa página. Você pode conferir os efeitos na própria página do projeto.

Vamos ao da biblioteca então, primeiramente devemos incluir a biblioteca no nossos head, o que pode ser feito direto pelo CDN:

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

Baixando pelo bower:

bower install animate.css --save

ou ainda baixando direto do Git do projeto

Após a biblioteca estar carregada, para executar uma animação basta adicionar ao elemento desejado, via javascript, as classes “animated” e a correspondente ao efeito desejado.

Segue a lista de efeitos disponíveis(clique para visualizar o efeito):

Para adicionar as classes podemos utilizar javascript puro,

<h1>Exemplo de uso Animate.css</h1>

var h1 = document.querySelector('h1');
h1.addEventListener("click", function(){
    h1.classList.add('animated');
    h1.classList.add('bounce');
});

Veja um exemplo

ou também podemos utilizar a biblioteca jQuery:

$(document).ready(function(){                
    $('h1').click(function(){
        $('h1').addClass('animated bounce');
    });             
});

A Animate.css é uma biblioteca muito fácil de utilizar, mas uma vez que a animação é realizada, deve-se remover e adicionar as classes novamente para que a animação se repita. Podemos fazer isto, removendo a classes de animação quando o evento de animação terminar.

$('h1').one('animationend', function(){
      $(this).removeClass();
});

No exemplo acima capturamos o evento gerado quando uma animação CSS termina(animationend) e removemos todas as classes do elemento selecionado.

Para obtermos uma melhor compatibilidade com os eventos de navegadores antigos, a própria página da biblioteca apresenta a solução de adicionar uma nova função no jQuery e chamar os efeitos através dela.

Segue abaixo o código:

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };
 
      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));
 
    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
 
      if (typeof callback === 'function') callback();
    });
 
    return this;
  },
});

Após ter carregado o código acima, de um arquivo externo por exemplo, podemos acionar a animação através da função animateCss:

$('#seuElemento').animateCss('bounce');

ou;

$('#seuElemento').animateCss('bounce', function() { // realizar algo depois da animação });

Bom, era isso e boas animações!