Eae? Tudo bele?

Hoje em dia é muito comum vermos em muitos sites animações de em diferentes formatos. Elas, quando usadas de forma adequada, atraem atenção e criam um ambiente de interatividade. E graças ao CSS3 Animation ficou mais fácil criá-las.

Há um tempo não tão longo assim, teríamos nos apoiados apenas em ferramentas como o Flash e o Javascript para criar animações que rodassem no navegador. Mas graças aos navegadores modernos hoje temos suporte para trabalhar com CSS e a especificamente com a propriedade CSS3 Animation que possibilita construir animações também com um bom controle.

Você gostaria de aprender a criar animações CSS que impactassem em seus projetos?

Neste artigo trago uma introdução a propriedade CSS que pode trazer mais vida aos seus sites através de animações. Bem-vindo ao mundo da CSS 3 Animation.

CSS3 Animation: Propriedade da animation

Animation é uma propriedade CSS que serve basicamente para animar outras propriedades CSS. Como exemplo, ela é capaz de animar propriedades como a width, a height e a background-color, que respectivamente, são responsáveis pela largura, altura e cor de fundo um elemento HTML.

Esta propriedade torna possível animar uma transição de um estilo CSS para outro.

A seguir podemos ver duas animações básicas de uma transição entre duas cores de fundo usando o JSFiddle. Para melhor entendimento você pode navegar entre as abas result, HTML e CSS para ver o aspecto visual e a codificação usada.

Animação 1:

Animação 2:

Observação: Tirando o fato que usamos cores de fundo diferentes para diferenciar os exemplos o comportamento obtido é o mesmo, só que com codificações diferentes. O primeiro usou os seletores from e to, enquanto o segundo usou os seletores de porcentagens 0% e 100%. Esses seletores exemplificados têm a mesma função de definir um estágio inicial e um final.

Para que tudo funcione é preciso que você declare um nome de sua escolha para a regra @keyframes, esta denominação deve ser chamada como um valor da propriedade abreviada animation. Veja que no exemplo anterior definimos a regra como o nome “elemento”.

@keyframes elemento {
...

E chamamos o valor declarado como um dos valores na propriedade animation.

.animate {
  animation: elemento 10s infinite;
...

Mais à frente veremos que este valor é atribuído separadamente a propriedade animation-name.

CSS3 Animation: Regra @keyframes

A regra @keyframes possibilita definir o que acontecerá nos momentos que você especifica para sua animação. Imagine que você pretende que um elemento receba um estilo no começo da animação, 0%, e no final, 100%. Esses estágios definidos são, quadros-chave.

E não tão somente é possível animar nos dois pontos, inicial e final, mas também pontos intermediários a sua escolha (15%, 23%, 60%, 99%, entre outros).

Basicamente na regra @keyframes contamos com a declaração do nome de sua escolha, os estágios definidos por você e os estilos que serão aplicados quando um estágio especificado for atingido.

Variações da propriedade animation

Tendo especificada a regra @keyframes, então os estágios podem ser controlados pela propriedade abreviada animation ou suas oito variações que possibilitam mais controle sobre os estágios definidos. A seguir vamos conhecer as variações da propriedade animation.

Animation-name

Esta propriedade declara o nome da regra @keyframes que devemos manipular.

Sintaxe CSS:

animation-name: elemento;

Animation-duration

Com esta propriedade se define o tempo necessário para que uma animação complete um ciclo.

Sintaxe CSS:

animation-duration: 2s;

Sintaxe CSS com propriedade abreviada:

animation: elemento 2s;

Animation-timing-function

Estabelece curvas de aceleração da animação. Você pode especificar com valores preestabelecidos: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit. Ou criar funções de temporização personalizadas usando cubic-bezier curve.

Sintaxe CSS:

animation-timing-function: ease-in;

Sintaxe CSS com propriedade abreviada:

animation: elemento 2s ease-in;

Se nenhum valor for atribuído à propriedade o valor padrão é ease.

Animation-delay

Aqui definimos o tempo entre o elemento que está sendo carregado e o início da sequência de animação.

Sintaxe CSS:

animation-delay:  3s;

Sintaxe CSS com propriedade abreviada:

animation: elemento 2s ease-in 3s;

Animation-direction

Esta propriedade define a direção da animação após o ciclo. Você pode estipular os seguintes valores:

• normal: Este é o valor padrão – A animação é reproduzida. Em cada ciclo, a animação volta ao estado inicial (0%) e reproduz-se novamente (até 100%).
• reverse – Com este valor a animação é reversa. Em cada ciclo, a animação volta ao estado final (100%) e é reproduzida para trás (para 0%).
• alternate – Neste caso a animação inverte a direção em cada ciclo. Em cada ciclo ímpar, a animação é reproduzida (0% a 100%). Em cada ciclo par, a animação é reproduzida (100% a 0%).
• alternate-reverse – Aqui a animação também inverte a direção em cada ciclo. Só que a diferença é que m cada ciclo ímpar, a animação é reproduzida no reverso (100% a 0%), enquanto em cada ciclo par, a animação é reproduzida (0% ou 100%).

Sintaxe CSS:

animation-direction: reverse;

Sintaxe CSS com propriedade abreviada:

animation: elemento 2s ease-in 3s reverse;

Animation-iteration-count

Essa propriedade define o número de vezes que a animação deve ser realizada.
Você pode estipular os seguintes valores:

• Um número específico determinado por você que quantificará as vezes que a animação deve-se repetir. O padrão é 1.
• infinite – a animação se repete para sempre.
• initial – define a contagem para o valor padrão
• inherit – herda o valor do elemento pai.

Sintaxe CSS:

animation-iteration-count: infinite;

Sintaxe CSS com propriedade abreviada:

animation: elemento 2s ease-in 3s reverse infinite;

Animation-fill-mode

Esta propriedade define quais valores são aplicados antes e depois da animação. Com ele podemos definir que o último estado da animação, ou seja, os estilos aplicados ao estágio 100% permaneçam na tela (forwards), ou definimos que antes da animação os estilos aplicados ao estágio inicial são aplicados ao elemento (backwards).

Também é possível que esses comportamentos de aplicações de estilos antes e depois da animação sejam aplicados em conjunto (both).

Você pode estipular os seguintes valores:

• forwards;
• backwards;
• both;
• normal – Este é o valor padrão onde a animação não aplica nenhum estilo ao elemento, antes ou depois da animação.

Sintaxe CSS:

animation-fill-mode: forwards;

Sintaxe CSS com propriedade abreviada:

animation: elemento 2s ease-in 3s reverse infinite forwards;

Animation-play-state

Esta propriedade especifica se a animação está tocando ou pausada. Você pode estipular os seguintes valores:

• paused – A animação está pausada;
• running – A animação está rodando
• initial – define a contagem para o valor padrão;
• inherit – herda o valor do elemento pai.

Sintaxe CSS:

animation-play-state: forwards;

Sintaxe CSS com propriedade abreviada:

animation: elemento 2s ease-in 3s reverse infinite forwards running;

As codificações acima considerado todos os valores possíveis de animation que também poderia ser representa da seguinte forma:

.animate {
animation-name: elemento;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-delay:  3s;
animation-direction: reverse;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-play-state: forwards;
}

Aplicando CSS3 Animation com os conhecimentos adquiridos

Agora vamos para  uma aplicação do CSS3 animation. E para não haver confusão, vamos dividir a codificação em duas etapas:

A primeira será a etapa da especificação da regra @keyframes e a segunda a definição dos estilos da propriedade animation e demais estilos se necessário.

Para aplicar essas ações vamos construir uma animação básica com elementos geométricos básicos. Entretanto para animações de um elemento ou elementos mais complexos talvez você tenha que esboçar em um papel ou software gráfico as transformações que ocorrerão em cada estágio da animação.

O elemento a ser animado segue a seguinte estrutura HTML:

<div class="scale">
</div>

Nosso exemplo iniciará apresentando um elemento de cor avermelhada e quadrado, que ao decorrer do tempo vai aumentando de tamanho, que vai simultaneamente deslocando-se para direita e arredondando suas bordas até chegar a um estágio onde assume uma cor azulada e formato circular. E ao decorrer de mais tempo faz o processo inverso (alterna a animação) até retornar ao ponto de origem. Esse processo estará definido para se repetir infinitamente.

Primeira etapa – Regra @keyframes

Nesta etapa são especificados os estágios que recebem os estilos que definem a aparência e o comportamento do elemento.

Essa etapa será dividida em 3 passos:

• O nome declarado da animação (@keyframes) – No nosso caso será “elemento”.
• Estágios da animação – Os estágios da animação podem ser representados por porcentagem. No nosso caso terão dois. Um inicial, 0% e outro final, 100%. Sua animação pode ter a quantidade maior de estágios se necessário.
• Propriedades CSS – As propriedades que estilizam o elemento animado em cada estágio.

Segue o código para @keyframes:

@keyframes elemento {
  0% {
    background-color: #fb2b49;
    margin-left: 0;
    width:1px;
    height:1px;
  }
  100% {
    background-color: #bbefbf;    
    margin-left: 90%;
    border-radius: 50%;
    width:150px;
    height:150px;
  }
}

Como podemos ver no estágio inicial (0%) e o elemento recebe tamanho de 1 pixel por 1 pixel, recebe também uma cor avermelhada e fica posicionado à esquerda. Conforme a animação for ativada ele gradativamente vai aumentando de tamanho, arredondando as bordas e mudando de cor até atingir a largura e altura de 150 pixels, a cor azulada e formato circular pela propriedade border-radius.

Segunda etapa – Estilos da propriedade animation

É neste processo que chamamos o valor de animation-name (elemento) que foi declarado na @keyframes e que se defina as outras propriedades de animação para que tudo funcione.

Segue o código relativo a propriedade animation:

.scale {			
	animation: elemento 5s ease-in 0s alternate infinite none running;
}

Podemos ver na declaração CSS que chamamos “elemento” para que as propriedades animem os estágios estilizados nas @keyframes. Também foi definido que o ciclo da animação deve durar 5 segundos, que a curva de aceleração da animação definida como “easy-in”, que a animação deve ter ciclo alternados e repetir infinitamente.

Veja agora o resultado no JSFiddle logo a seguir. Para melhor entendimento você pode navegar entre as abas result, HTML e CSS para ver o aspecto visual e a codificação usada.

.

Suporte aos navegadores

No momento que escrevo este artigo (Ourubro de 2017) a grande maioria dos navegadores modernos suportam o CSS3 Animation conforme podemos ver no suporte Can I Use ( ). A única exceção é o Opera Mini.

Fontes para você se inspirar e começar a utilizar CSS3 Animation

Para você ter uma noção de como a propriedade CSS animation trabalha a seguir mostro alguns trabalhos que aplicam de forma avançada as animações.

Pure CSS Twitter ‘Fail Whale’

Este é uma versão animada de Steve Dennis baseada da Baleia da Falha que aparece quando surge algum problema no Twitter. Visite clicando aqui »

Full CSS 3D Solar System

Neste exemplo temos um Sistema Solar completo 3D criado por Wayne Dinkley criado no Codepen. Visite clicando aqui »

CSS Creatures

Esse é um site que apresenta criaturas feitas com puro CSS. E o bacana é que você pode construir sua própria criatura. Visite clicando aqui »

Conclusão

As animações CSS se mostram uma forma interessante para proporcionar interatividade as interfaces web e que você pode optar em relação a outras tecnologias.

Graças a CSS3 animation podemos criar coisas que antigamente só eram possíveis via o antigo Flash ou com várias linhas de javascript.

O objetivo deste artigo foi dar uma pincelada introdutória sobre aspectos introdutórios da propriedade animation. Para uma pesquisa mais avançada você pode recorrer a documentação W3C.

Caso queira aprender mais sobre CSS, você pode continuar aqui no blog, acessando outros artigos sobre o assunto:

➡CSS Grid Layout
➡CSS e suas propriedades mais utilizadas
➡Tipografia para Web – parte 1
➡CSS medias queries

E você? O que achou do CSS Animation? Já utiliza em seus projetos? Deixe sua opinião e aproveite e compartilhe sobre esse assunto com seus amigos!

Forte abraço.

Até mais.

Referências:

https://css-tricks.com/almanac/properties/a/animation/
https://webdesign.tutsplus.com/pt/tutorials/a-beginners-introduction-to-css-animation–cms-21068
https://robots.thoughtbot.com/css-animation-for-beginners
http://www.creativebloq.com/css3/animation-with-css3-712437
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Animations/Usando_anima%C3%A7%C3%B5es_CSS