Utilizando animações com Animate CSS

Utilizando animações com Animate CSS

Olá mais uma vez, hoje quero compartilhar com vocês uma biblioteca que te auxilia no uso de animações. A lib é a Animate.CSS você também pode consultar o github aqui.

Para que não esta familiarizado animações foram introduzidas no CSS3 e permite que através do estilo de uma página você configura comportamentos animados, movimentos, rotações, translação, aumente e diminuir de tamanho são algumas que podemos fazer com animações combinados a mais algumas propriedades css.

A lib que vou compartilhar hoje torna este trabalho mais fácil, já tendo um set de animações criados e deixando a cargo do desenvolvedor apenas manipular as classes de um elemento html, então vamos lá.

Instalação

Você pode instalar seguindo estes passos simples.

ou você pode instalar via npm:

Uso

Você deve incluir o CSS em seu <head>

ou você pode usar o serviço de CDN do CDNJS:

Em suas tags html você deve usar a propriedade class com o valor “animated” sempre que quiser algum animação, você também pode incluir a classe “infinite” para que a animação fique em loop infinito.

Veja que a tag div será o alvo da animação portanto na propriedade class do elemento eu devo inserir obrigatoriamente a classe “animated” e a classe que leva o nome da minha animação no exemplo um efeito de entrada com fade vindo de baixo, “fadeInDown”.

Veja abaixo uma lista das classe.

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Você também pode usar o modo infinito veja abaixo:

No exemplo acima o elemento H1 fica saltando em loop infinito, ou enquanto ele possuir a classe “infinite”

Uma dúvida recorrente é no caso das animações de saída, por exemplo, você tem um paragrafo que deve fazer o fadeIn em um determinado ponto do scroll e depois de algum tempo fazer o fadeOut, como fazer?

Isto é bem simples, devemos manipular as classes do elemento após ocorrer a renderização do html, então no primeiro estado o html do paragrafo estaria da seguinte forma:

E em algum determinado momento você deve disparar um evento que faz a manipulação da classe. Veja:

No exemplo acima com JQuery, nós inserimos uma classe e removemos outra e no exemplo em JS puro nos reescrevemos o class do elemento, é claro que existem diversas forma de manipular o class de um elemento, mas neste exemplo o foco é mostrar que uma simples manipulação do elemento troca a animação.

 

Obrigado por você estar aqui, se puder da um share em suas redes sociais e um abraço.
Se tiver alguma critica, sugestão ou correção deixa um comentário que terei imenso prazer em te responder.

Related Posts