Como adicionar animações em CSS – Animate.CSS

Por | Atualizado em 2015-05-11

A linguagem CSS permite-lhe adicionar vários tipos de animações em elementos de uma página web (imagens, botões, etc).

De salientar, que as animações em CSS podem ser uma boa alternativa às animações em Flash.

Uma das formas mais simples de usar animações em CSS consiste na utilização das bibliotecas animate.css.

Na prática, o Animate.CSS coloca à sua disposição mais de 60 animações prontas a usar.

DEMO 1:

DEMO 2:

Como adicionar animações em CSS?


Comece por baixar o arquivo CSS do github da página oficial do animate.css e faça o upload do mesmo para o seu servidor através de FTP.

E se não possuir um servidor com hospedagem própria?

Nesse caso poderá hospedar o arquivo CSS nos servidores do Google Drive. Caso tenha dúvidas poderá consultar o seguinte tutorial: Como hospedar CSS no Google Drive (exemplo: Blogger).

Agora faça a “chamada” do arquivo CSS no seu código fonte. Por exemplo:

<head>
<link rel="stylesheet" href="animate.css">
</head>

Agora, basta adicionar o atributo class com o nome da animação que pretende aplicar. Por exemplo:

<img src="link_da_imagem" class="animated swing" />

Você encontrará o nome de todas animações disponíveis na página do animate.css. Salve as alterações e visualize o resultado final.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *