Um dia desses precisei fazer umas animações em um site de cliente, não queria colocar o Flash em ação então pesquisei sobre Animação em CSS3/HTML5 e acabei achando uma Folha de Estilo bastante interessante e vou compartilhar com vocês.
Segue o link: http://daneden.me/animate/
O mais legal é que no próprio site existe um “Create custom Build“, que você pode selecionar só as animações que deseja para ele gerar o .css e com isso deixar o arquivo sempre mais leve e enxuto para o seu projeto.
Para usar o código é muito simples, no inicio do seu HTML inserimos o .CSS gerado pelo site:
Na div que você quer fazer a animação, vamos aplicar a Classe responsável:
No CSS, vamos colocar o seguinte código:
Explicando:
Na div #box colocamos duas classes, a animate e bounceIn
a .bounceIn é a responsável para dar o efeito, vc pode escolher dentre todas aquelas do site do Daneden, só alterar o nome.
a .animate eu criei para ficar mais fácil, pois toda DIV para receber o efeito precisa começar com essa classe, se não, não funciona 😉
Ahhh, vale lembrar que por se tratar de uma animação feita em CSS3, só irá funcionar em browsers mais novos e o IE está fora da lista até a sua versão 8.0
Veja a demonstração