Animate.css – gerando animações de forma simples

Neste artigo vamos fazer algumas experiências com a biblioteca Animate.css, que simplifica o processo de animação de elementos com animações padrões.

Mais um artigo rápido, neste vamos fazer algumas experiências com a biblioteca CSS Animate.css, que simplifica o processo de animações de elementos trazendo as principais e mais utilizadas animações prontas para utilização.

Animações não são uma novidade em desenvolvimento web, porém desde que o flash morreu para a web que ficou mais difícil ver animações padrões em websites.

Hoje com HTML5 e CSS3 podemos gerar animações facilmente através das propriedades animation e transition.
O Tableless tem um artigo interessante sobre CSS Transitions e CSS Animations.

Para iniciar, primeiro crie um arquivo HTML com pelo menos um elemento, para receber a animação. Criei um arquivo base para apresentar os testes deste tutorial, quem quiser utilizar o mesmo arquivo pode baixar aqui.

No meu arquivo HTML o código ficou da seguinte forma:

<!DOCTYPE html>

<html lang="pt-BR">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Animate.css - Biblioteca de animações CSS</title>

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

    <style type="text/css">

        body {
            font-family: helvetica;
            text-align: center;
        }

        .box {
            background-color: gold;
            margin: 0 auto;
            width: 500px;
            padding: 50px;
            margin-top: 70px;
            box-shadow: 1px 1px 15px #888888;
            border: solid 3px white;
            border-radius: 10px;
        }

        .box-margin {
            margin-top: 100px;
        }

    </style>

</head>

<body>

    <div class="box-margin">
        <h1 align="center">Testando o Animate.css</h1>
    </div>

    <div class="box animated bounce">
        <h1 class="">teste</h1>
    </div> 

</body>

</html>

Note que o único arquivo linkado a esse é o animate.css, que é o arquivo da biblioteca que estamos testando. Temos alguns estilos declarados apenas para uma melhor visualização da animação na página conforme a imagem abaixo.

Animate.css - Web Social Dev - Post

Para adicionar uma animação a um dos elementos, basta adicionar a classe animated seguida do nome do efeito, que está presente na pagina inicial da biblioteca, onde também podemos testar cada animação.

No nosso exemplo, utilizamos a animação chamada bounce no elemento box. No meu arquivo o box já está com essa classe inclusa, então o elemento vai apresentar o efeito quando carregar a página.

Animate.css - Web Social Dev - Post

Experimente testar com outros exemplos com outros elementos, ao mesmo tempo. Da pra você animar qualquer elemento previamente declarado em seu arquivo HTML, da até mesmo pra você animar mais de um elemento de uma vez.

No video abaixo você pode ver passo a passo a implementação e utilização do plugin para que não haja duvidas na utilização.

Note que a biblioteca conta com os efeitos padrões, quem usava um Flash vai sentir uma nostalgia pois a maioria dos dos efeitos são originados dele. Se você precisar de animações básicas em seu website, essa solução é perfeita, mas caso precise de uma animação especifica, nada vai substituir o fato de você ter de estudar as propriedades CSS referentes a animações para chegar ao resultado esperado.

Qualquer duvida, por favor encaminhem um comentário.

🙂

  • rogerio gabriel

    muito obrigado por sua contribuição saiba que foi muito util a sua explicação, agradeço a você pois hoje a internet estar carente de pessoas assim com vasta inteligencia e conhecimento e ter o prazer em ajudar aos outros que nessecitam de tal informção,muito obrigado mesmo valeu :}

    • Obrigado Rogerio, me deixa muito feliz saber que ta ajudando o pessoal que tem interesse. Valeu, abraço!