Animação CSS: o que é e como utilizar

O que é CSS?

CSS é a sigla de “Cascading Style Sheets”, que quer dizer em português “folhas de estilo em cascata”. Trata-se de uma linguagem de programação para estilos utilizada para definir e padronizar a parte visual de arquivos HTML, ou seja, o seu layout. No CSS, você estipula características e especificações de elementos que compõem uma página de internet como cores, margens, fontes, linhas, alturas, larguras, imagens de fundo, posicionamentos, etc.

Vantagens do CSS

Com o HTML, você até consegue dar uma cara boa ao seu layout, mas não podemos negar que o CSS oferece muito mais opções de personalização. Outras vantagens são que ele é bem mais preciso e é suportado por todos os navegadores atuais.

São estes os motivos que nos levam a utilizar o CSS em nosso dia-a-dia para formatar e estilizar as páginas que desenvolvemos. Além de fazer a formatação e a estilização, podemos também utilizar o CSS na criação de animações para deixar os nossos layouts mais bonitos e interativos.

Flash x Animação CSS

Flash

Navegadores como o Chrome, por exemplo, estão deixando de aceitar sites com tecnologia Flash para focar mais na qualidade e no desempenho dos sites. Apesar de ser uma ferramenta boa – cria muita coisa interativa – ele é bastante pesado e isto interfere muito no carregamento das páginas, além de ser péssimo para SEO.

O fator usabilidade também conta muito aqui: ele é bem complicado de se usar. Outra desvantagem é que nem todos os navegadores tem suporte nativo para ele.

Animação CSS

O CSS gera animações bem mais leves que o Flash. Além disto, você pode fazer quaisquer animações que faria com o Flash, mas de maneira mais simples e fácil. E mais: a Animação CSS não interfere no SEO, e como já citamos, é suportado atualmente por todos os navegadores.

A propriedade Animate do CSS nos permite animar transições de um estilo para o outro. Ela consiste em dois componentes:

• Estilo, com a animação desejada.
• @keyframes, em que você pode configurar as regras de como seu estilo vai se comportar em determinadas situações.

Combinando estes dois componentes, podemos criar combinações que resultam em uma infinidade de animações. E o melhor: sem comprometer a performance do seu site!

Exemplos de Animações CSS

Com a combinação de algumas linhas de códigos, conseguimos fazer animações bem bacanas e leves, como demonstrado abaixo:

CSS:

.cubo{

background-color: blue;

height: 300px;

width: 300px;

margin: auto;

transition: all 1s ease 0s;

transform: rotateZ(0deg);

border-radius: 0 0 0 0;

animation: cubo-transform 5s .5s infinite cubic-bezier(1,0.15,.29,1.21) alternate;

}

@keyframes cubo-transform{

0%{

border-radius: 0 0 0 0;

}

25%{

border-radius: 0 100% 0 0;

background-color: red;

}

50%{

border-radius: 0 100% 100% 0;

background-color: green;

}

75%{

border-radius: 0 100% 100% 100%;

background-color: purple;

}

100%{

border-radius: 100% 100% 100% 100%;

}

}

HTML

<div class=”cubo”></div>

Podemos utilizar o CSS para criar diversos tipos de animações, desde um simples hover até animações mais complexas, como loadings, ou até mesmo uma animação de bonecos. Veja o exemplo abaixo, no qual foram utilizados apenas HTML, CSS e algumas imagens:

Seguem abaixo mais algumas animações interessantes que você pode utilizar em seu site. Clique nos botões para visualizar a animação. É muito mais divertido quando você interage com elas!

Como vimos, é uma boa hora para aprender a trabalhar com CSS, criando layouts bonitos e interativos através de suas animações!