Utilizando animações CSS: Animate.css _

Animações em CSS de forma simples usando Animate.css
Animações em CSS de forma simples usando Animate.css

por João Oliveira

Sou programador freelancer e empresário há mais de 15 anos. Já trabalhei em mais de 1000 projetos diferentes em PHP, Node, Python, HTML, CSS e Javascript. Tenho clientes na Alemanha, no Peru e é claro, no Brasil.

Com a morte do Flash e a evolução do CSS, se tornou muito mais fácil criar projetos para a web com interfaces bem elaboradas, cheia de efeitos e micro-animações. Coisa que dava medo só de pensar há alguns anos atrás.

Uma biblioteca bem interessante que nos permite fazer isso de forma simples nos dias de hoje é a Animate.css. Veja como é rápido e prático instalar em três passos:

  1. Baixe a biblioteca – link.
  2. Salve-a na pasta do seu projeto
  3. Faça referência à ela entre as tags <HEAD>

Pronto! Para animar os elementos, é só adicionar as classes animated e o efeito que você quer que o elemento tenha, por exemplo:

O nome das animações você pode conhecer e testar no próprio site da biblioteca.