Introdução a Animações CSS

Animações CSS são amadas e odiadas por profissionais de Web no mundo todo. Veja nessa introdução a Animações CSS porque elas merecem só serem amadas. <3

Ir para o artigo

A Animação CSS ou CSS Animation por (muitas) vezes é mal compreendida pela maioria não-profissional da área de Web e, surpreendentemente, também por muitos profissionais de nossa área.

Para a maioria, animações Web são apenas firulas, coisas bonitinhas, enfeitezinhos gut gut… Mas a verdade é que as animações podem cumprir papel muito importante em um projeto Web (quando bem utilizadas).

Como mostrado na parte 1 de nosso artigo sobre Princípios Jedi de Motion UI, em sua estrutura/função mais básica, animações podem otimizar a experiência percebida, guiar a atenção das pessoas a pontos planejados e fornecer feedbacks de maneiras únicas. E só estamos falando de 1 das 3 funções principais da animação Web.

Os 3 pilares de Animações CSS

A Animação CSS possui 3 pilares:

  1. A diretiva @keyframes
  2. As propriedades animation-*
  3. Easings

Sem a diretiva @keyframes, que contém, efetivamente, a definição de como é a animação, nada pode ser feito em CSS Animation.

Sem sua contraparte nas propriedades CSS animation-*, tão pouco, pois é preciso instruir o navegador a o que fazer e como tocar a animação.

Por fim, sem easings devidamente pensados e planejados, a animação pode se perder em sem-gracice e monotonia, nunca chegando a alcançar seu zênite de utilidade e efeito “Uau!”.

@keyframes

Imagine que cada animação está inserida em uma linha do tempo (timeline), tendo propriedades CSS sendo alteradas/manipuladas em seu transcorrer.

Keyframes são a base de Animações CSS. Eles definem como a animação será em cada estágio de sua linha do tempo (timeline).

Em CSS, trabalha-se com keyframes através da diretiva @keyframes, que funciona da seguinte maneira:

Inicia-se com a própria diretiva @keyframes seguida do nome que se quer atribuir à animação — no caso, “fade-out”.

Dentro do bloco da definição da animação CSS, trabalha-se novamente com a alusão a uma linha do tempo, definindo quais propriedades serão manipuladas através da definição de em que ponto da timeline (definido em porcentagem) isso vai acontecer.

No exemplo acima, assim que a animação começa (0%) o elemento terá opacidade alguma (ou seja, será transparente) e, ao fim da animação (100%), será totalmente opaco.

Para casos como este, é possível usar algumas palavras-chave, como:

Ou até:

Todos os 3 códigos farão exatamente a mesma coisa. O que se altera, é sua sintaxe, que fica a gosto do freguês.

Claro que não é preciso se limitar a somente as definições do quê acontece no início e fim da animação; é possível trabalhar com propriedades da animação em qualquer %, como em:

Exemplo que manipula 3 pontos da timeline (0%, 60% e 100%) que servem como keyframes da animação, deixando a interpolação dos “estados” do elemento por conta do browser.

Mas como saber em qual elemento a animação vai acontecer, em quanto tempo e muitas outras definições sobre a animação CSS? É aí que entram as propriedades animation-*.

Propriedades animation-*

As propriedades animation-* são utilizadas para referenciar os @keyframes a um (ou mais) seletor(es) CSS para trabalhar as características da animação.

Essas propriedades de CSS Animation são:

  • animation-name: nome atribuído no @keyframes
  • animation-duration: O tempo de duração da animação
  • animation-timing-function: velocidade com que a animação é executada (easing)
  • animation-delay: o delay para iniciar a animação
  • animation-iteration-count: quantas vezes a animação será executada
  • animation-direction: altera a forma como a animação é executada (ex: do começo para o fim ou do fim para o começo)
  • animation-fill-mode: determina o que acontecerá ao término da animação (se retorna ao ponto original, se fica como terminou etc.)
  • animation-play-state: especifica se a animação está acontecendo ou se está pausada.

Como muitas outros casos em CSS, também existe a forma abreviada (ou shorthand) para todas essas propriedades, a animation, que tem cada “parâmetro” exatamente na ordem da lista de propriedades acima.

Então, por exemplo, é possível declarar a animação fade-out assim:

Ou assim:

No dia-a-dia, geralmente, declara-se a animação usando a shorthand, deixando a definição esparsa, usando cada propriedade, para casos de overrides, break points e casos similares.

Easings

De maneira simples, “easings” são maneiras de alterar o tempo em que uma animação acontece. Easings deixam as animações mais agradáveis; mais fluidas; alguns diriam até mais “naturais”.

Em animações CSS, é possível trabalhar com easings através da propriedade animation-timing-function, que pode ser controlada/manipulada de 2 maneiras:

  1. Funções de tempo pré-definidas (através de palavras-chave)
  2. Funções personalizadas (através da função cubic-bezier())

No primeiro caso, a própria CSS oferece nomes pré-determinados; funções de tempo já conhecidas e consagradas em qualquer tecnologia que trate de animações:

  • linear (default)
  • ease
  • ease-in
  • ease-out
  • ease-in-out

Cada uma delas manipula o tempo da execução da animação CSS, algumas a deixando lenta no início e rápida no fim; rápida no início e lenta no fim; etc.

Introdução a Animações CSS: representação gráficas das funções de easing padrão de CSS.

E, no segundo caso, a função cubic-bezier() está aí para permitir que funções de tempo personalizadas possam ser atribuídas às animações.

Por exemplo, se quiséssemos alterar o código mostrado anteriormente para uma função personalizada:

Então, essa animação seria tocada de uma maneira completamente diferente de como estava antes.

Esses não são valores aleatórios. A função segue a sintaxe cubic-bezier(x1, y1, x2, y2). Mas, excetuando matemáticos transloucados e estagiários querendo fazer bonito quando o chefe está olhando, geralmente usam-se sites que facilitam encontrar esses valores.

Tais sites proveem uma interface para manipular pontos da curva bézier visualmente e informar o valor final que será usado.

Introdução a Animações CSS: ferramenta visual para encontrar valores de easing.
É assim que seres humanos normais fazem. :)

Em nosso site Recursos Front End indicamos alguns bons sites que ajudam a montar easings visualmente.

E, devido a tanto poder, não é a toa que easings são 1 dos pilares de Animações CSS. Um bom easing, usado da maneira certa, traz brilho e vitalidade a qualquer animação meia-boca.

Saber usar bem easings é o que separa os mancebos dos experientes.

Conclusão

Animações CSS com certeza são uma das tecnologias mais amadas e mais odiadas por profissionais Web de front end.

Com este artigo, esperamos contribuir para diminuir a parte que odeia CSS Animations (muitas vezes, por não conseguir/saber lidar bem) e ajudar o crescimento e ensejo de novas e esplêndidas possibilidades visuais e de interação.

Ou somente contribuir para que mais projetos Web façam seu feijão-com-arroz em termos de animações, o que também já seria muito bom. :)

E você, já usa Animações CSS há quanto tempo? Coloca aí nos comentários alguns links de projetos com animações que você participou.