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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link href="animate.css" rel="stylesheet" type="text/css">
</head>
<body>
  <button class="animated bounceInLeft">Botão Animado</button>
  <div class="animated bounceIn">
    <p>Exemplo de DIV animada</p>
    <input placeholder="Campo" type="text">
    <p>
      <button>Salvar!</button>
    </p>
  </div>
</body>
</html>

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