Introdução ao Animate.css

website: https://daneden.github.io/animate.css/

O que é?

Animate.css é um conjunto de animações em CSS que você pode usar em qualquer elemento do seu website. Parece legal, né?

Vantagens

  • Cross-browser, ou seja, funciona em todos os navegadores modernos.
  • Muitíssimo simples de aprender e usar.
  • Possui várias animações, algumas delas muito legais.
  • Você pode criar um custom build com muita facilidade, podendo assim ter um arquivo apenas com as animações que você vai realmente usar.

Como usar

Como foi citado acima, animate.css é muito simples de ser usado. Você precisa apenas adicionar a class .animated e outra classe com o nome da animação (.bounce, por exemplo). Veja o exemplo abaixo:

Você também pode adicionar a classe .infinite caso você queira que a animação fique executando sem parar. Um exemplo com a classe .infinite:


Considerações Finais

Ao invés da animação ser executada automaticamente quando a página carregar, você pode fazer com que ela seja executada de acordo com alguma interação do usuário. Para isso apenas adicione a classe com o nome da animação que você deseja e então quando a interação acontecer (um clique, por exemplo) você adiciona a classe .animated ao determinado elemento usando javascript. No próprio repositório eles ensinam a fazer isso com jquery. Vale a pena também dar uma olhada no WOW.js (ele faz com que o elemento com a animação só seja animado quando ele ser visto pelo usuário).

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.