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:
- Baixe a biblioteca – link.
- Salve-a na pasta do seu projeto
- 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.