Como criar animações CSS em seu site com animate.css

Categoria do post:Desenvolvimento de aplicativos / Programação para Web
Post publicado:7 de outubro de 2017
Tempo de leitura:9 minutos de leitura

Ads

Animete.css é uma biblioteca CSS criada especialmente para criar pequenos efeitos em páginas e aplicativos. Alguns exemplos de animações podem ser testadas no próprio site da animate.css.

Tutorial de como usar a biblioteca animate.css

Crie uma nova página HTML (Pode usar BootStrap se quiser ?).

Acrescente no cabeçalho do documento (dentro das tabes <HEAD> e </HEAD>) o endereço CDN do animate.css

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

A estrutura do documento ficará assim;

<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Minha página animada</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>

</body>
</html>

Manipulando as animações com DOM

Crie um paragrafo e atribua um id para ele e atribua também a classe animeted, por exemplo;
```
<p id="texto" class="animated" onclick="Animar()">Olá! Eu sou um texto animado. Clique aqui para ver!</p>
```
A classe animated pertence ao animate.css e deve ser usada sempre que quiser animar um elemento.
Agora crie uma função JS que irá manipular este elemento com DOM (Document Object Model). Utilize o seguinte código:
```
<script>
 function Animar() {
 var d = document.getElementById("texto");
 d.className += " bounceOutLeft";
 }
</script>
```

O código completo ficará assim;

<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Minha página animada</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

<body>
 <p id="texto" class="animated" onclick="Animar()">Olá! Eu sou um texto animado. Clique aqui para ver!</p>

<script>
 function Animar() {
 var d = document.getElementById("texto");
 d.className += " bounceOutLeft";
 }
 </script>
</body>
</html>

Agora, veja o resultado! Teste você mesmo clicando sobre o parágrafo.

Você pode substituir a classe bounceOutLeft por qualquer outra deste quadro;

Class Name
`bounce`
`flash`
`pulse`
`rubberBand`
`shake`
`headShake`
`swing`
`tada`
`wobble`
`jello`
`bounceIn`
`bounceInDown`
`bounceInLeft`
`bounceInRight`
`bounceInUp`
`bounceOut`
`bounceOutDown`
`bounceOutLeft`
`bounceOutRight`
`bounceOutUp`
`fadeIn`
`fadeInDown`
`fadeInDownBig`
`fadeInLeft`
`fadeInLeftBig`
`fadeInRight`
`fadeInRightBig`
`fadeInUp`
`fadeInUpBig`
`fadeOut`
`fadeOutDown`
`fadeOutDownBig`
`fadeOutLeft`
`fadeOutLeftBig`
`fadeOutRight`
`fadeOutRightBig`
`fadeOutUp`
`fadeOutUpBig`
`flipInX`
`flipInY`
`flipOutX`
`flipOutY`
`lightSpeedIn`
`lightSpeedOut`
`rotateIn`
`rotateInDownLeft`
`rotateInDownRight`
`rotateInUpLeft`
`rotateInUpRight`
`rotateOut`
`rotateOutDownLeft`
`rotateOutDownRight`
`rotateOutUpLeft`
`rotateOutUpRight`
`hinge`
`jackInTheBox`
`rollIn`
`rollOut`
`zoomIn`
`zoomInDown`
`zoomInLeft`
`zoomInRight`
`zoomInUp`
`zoomOut`
`zoomOutDown`
`zoomOutLeft`
`zoomOutRight`
`zoomOutUp`
`slideInDown`
`slideInLeft`
`slideInRight`
`slideInUp`
`slideOutDown`
`slideOutLeft`
`slideOutRight`
`slideOutUp`

Manipulando as animações com jQuery

Se você gosta de usar jQuery, a programação se torna ainda mais simples, pois o jQuery possui o método

Acrescente no cabeçalho do documento (dentro das tabes <HEAD> e </HEAD>) o endereço CDN do jQuery.js
```
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
```

Reescreva a função Animar() substituindo o document.getElement pelo seletor do jQuery que é cifrão $, ficando assim:

<!DOCTYPE html>
<html lang="pt-br">

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Minha página animada</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>

<body style="background-color: lightblue;">
 <p id="texto" class="animated" onclick="Animar()">Olá! Eu sou um texto animado. Clique aqui para ver!</p>

<script>
 function Animar() {
 $('#texto').addClass('bounceOutLeft');
 }
 </script>
</body>
</html>

Por fim, o resultado final será exatamente o mesmo que o anterior.

Dica monstro: Nesta aula vimos como exemplo a implementação de uma animação em um parágrafo, no entanto, a animação pode ser aplicada em qualquer elemento HTML que possa ser manipulado por DOM ou jQuery. Isso significa que você também pode aplicar animações em DIVs, imagens, botões, listas, menus, formulários, títulos, etc…

Ads

Anderson Oliveira

Anderson Oliveira é desenvolvedor, escritor e docente no CEETPS - Centro Estadual de Educação Tecnologia de São Paulo. Atualmente trabalha na Administração Central do CPS e leciona aulas de programação na Etec Prof. Carmine Biagio Tundisi de Atibaia.