Como animar com CSS

Já nos acostumamos a ver animações em sites e aproveitar a energia e variedade que elas trazem para o web design. Eles são atraentes, uma ótima maneira de adicionar algum interesse visual a um site e geralmente tornam a experiência mais empolgante para seus usuários.

Embora tradicionalmente conseguidas com GIFs, SVGs, WebGL e vídeos em segundo plano, as animações também podem ser criadas com eficiência com CSS. O suporte do navegador para animações CSS melhorou bastante e está se tornando bastante popular - navegadores compatíveis incluem Firefox 5+, IE 10+, Chrome, Safari 4+ e Opera 12+.

Hoje vou orientá-lo no básico da criação de uma animação CSS com uma demonstração passo a passo. Fique por aqui e confira cinco exemplos de animações. Você poderá usar todas essas ideias para criar animações para seus próprios projetos!

Noções básicas de animação CSS

Obviamente, é importante cobrir o básico de como as animações funcionam antes de mergulharmos nas cinco divertidas animações CSS.
Por exemplo, os quadros-chave são um componente chave para animações CSS. Você pode estar familiarizado com esse termo se já trabalhou com Adobe Flash ou tem experiência com edição de vídeo. Nesse caso, o termo keyframe é exatamente o que você pensaria: é uma maneira de especificar uma determinada ação.

Você pode ter encontrado @keyframes em uma folha de estilo CSS antes. Dentro deste @keyframes é onde você define os estilos e estágios para a animação. Aqui está um ótimo exemplo de um efeito fadeout:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

O básico do quadro-chave fadeout que acabamos de criar inclui:

• Um nome descritivo: neste caso, fadeOut.
• Etapas da animação: From foi definido como 0% e To foi definido como 100%.
• Estilos CSS que serão aplicados em cada etapa.

Por padrão, o From estará em 0% e o To estará em 100%, já que nenhum outro estágio é especificado neste exemplo.

Ações específicas com subpropriedades de animação

Precisamos fazer um pouco mais para estilizar as coisas — precisamos estilizar a propriedade de animation com subpropriedades. Se os quadros-chave definirem a aparência da animação, as subpropriedades da animação definirão regras específicas para a animação. Eles permitem configurar o tempo, a duração e outros detalhes importantes de como a sequência de animação deve progredir.

A propriedade animation é usada para chamar @keyframes dentro de um seletor CSS. As animações podem e geralmente terão mais de uma subpropriedade. Aqui estão alguns exemplos de subpropriedades:

Parceria com um artista gráfico em movimento

Nada pode dar vida aos seus projetos como a animação. Mas se você nunca trabalhou com um animador ou artista de gráficos em movimento, o movimento pode parecer um mundo estranho. Se você está pensando em p...

• Animation-name: nome do @keyframes at-rule, que descreve os keyframes da animação. O nome fadeOut no exemplo anterior é um exemplo de nome de animação.
• Animação-duração: tempo que uma animação deve levar para completar um ciclo completo.
• Função de temporização da animação: temporização da animação, especificamente como a animação transita pelos quadros-chave. Esta função tem a capacidade de estabelecer curvas de aceleração. Os exemplos são linear, facilidade, facilidade de entrada, facilidade de saída, facilidade de entrada ou cúbico-bezier .
• Animation-delay: atraso entre o momento em que o elemento é carregado e o início da animação.
• Animation-iteration-count: número de vezes que a animação deve se repetir. Quer que a animação continue para sempre? Você pode especificar infinito para repetir a animação indefinidamente.
• Direção da animação: se a animação deve ou não alternar a direção em cada execução da sequência ou redefinir para o ponto inicial e se repetir.
• Modo de preenchimento de animação: valores que são aplicados pela animação antes e depois da execução.
• Animation-play-state: com esta opção, você pode pausar e retomar a sequência de animação. Os exemplos são none, forward, backward ou ambos .

Juntando tudo para melhor suporte ao navegador

Há muita coisa acontecendo aqui, e a terminologia pode ser um pouco confusa. Mas agora sabemos que os quadros-chave definem a aparência da animação, bem como os diferentes estágios de animação, e que a propriedade de animação usa subpropriedades para definir opções de animação como atraso, direção, tempo e assim por diante.

Você provavelmente está familiarizado com os prefixos do fornecedor ou do navegador — eles são necessários ao trabalhar com animações. Precisamos ter certeza de que temos o melhor suporte ao navegador. Aqui estão os prefixos padrão do navegador:

• Chrome e Safari: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-

O Internet Explorer 10 não requer um prefixo para transições, mas todas as transformações exigem o prefixo. O Opera é coberto porque reconhece os estilos do WebKit.

Início da transição

• -webkit-transition
• -moz-transition
• transition

Início da transformação:

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

Cinco animações em ação

Agora que cobrimos o básico, vamos criar algum código para usar!

Animação Um: círculo para quadrado

Vamos detalhar este primeiro, para que possamos ter certeza de que entendemos todos os conceitos que abordamos até agora. A animação começará como um círculo e se transformará em um quadrado.

Criar uma div para começar é uma ótima maneira de testar a animação:

<div class=”animationOne”>
</div>

Agora vamos configurar nossos @keyframes . Esta animação terá cinco etapas porque um quadrado tem quatro lados e precisamos ter um ponto de partida de 0%. Use prefixos, como mostrado abaixo, mas para o resto do tutorial vamos mantê-lo simples com apenas o básico.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Agora, vamos criar alguns estilos para determinar qual será o raio da borda em cada estágio:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Agora adicione a propriedade background-color para ajudar a diferenciar cada estágio da animação:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Por fim, vamos aplicar a animação ao div de teste:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

A propriedade de animação geralmente é escrita em forma abreviada, então aqui está o que realmente está acontecendo no código:

• O nome da animação é circle-to-square .
• A duração da animação é de 2s .
• O atraso da animação é de 1s .
• O animation-iteration-count é infinite , portanto, continuará indefinidamente.
• E a direção da animação é alternate . Isso significa que ele tocará do começo ao fim e voltará ao início.

Animação Dois: rotação

Esta animação permite a rotação de um objeto.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Para manter nossos projetos de animação separados, lembre-se de criar outra div para este segundo exemplo. Adicionei uma cor de fundo porque adicionaremos a animação ao próprio div para este exemplo.

A duração desta animação é de dois segundos, com um atraso de três segundos. A contagem de iteração de animação é cinco, então este projeto será animado cinco vezes antes de parar. A animação é reproduzida em sentido inverso todas as vezes ímpares (1,3,5,… ) e na direção normal todas as vezes pares (2,4,6,… ).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animação Três: expandir e piscar

Esta é uma ótima animação para um botão porque é mais atraente e proeminente em comparação com outros elementos na página. Isso também pode ser algo que vale a pena incluir em um estado :hover .

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Para usar test this, precisamos da seguinte div inicial:

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

Animação Quatro: slide de texto
Vamos adicionar alguma animação ao texto. Este projeto faz seu texto deslizar uma vez da esquerda.

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Animação Cinco: fade in

Você tem algum conteúdo surpresa? Confira este fade na animação para o conteúdo que você deseja que apareça em um momento posterior. Você tem muitas opções aqui: o fade in pode ser rápido ou lento, acontecer uma ou várias vezes e assim por diante.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

As animações CSS3 são fantásticas para fazer seu site se mover e se movimentar! Agora que você tem os conceitos básicos para criar animações, as possibilidades de animação são infinitas. O que você vai animar?