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:
- A diretiva
@keyframes - As propriedades
animation-* - 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:
|
1 2 3 4 5 6 7 8 |
@keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } |
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:
|
1 2 3 4 5 6 7 8 |
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } |
Ou até:
|
1 2 3 4 5 |
@keyframes fade-out { to { opacity: 0; } } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } |
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@keyframesanimation-duration: O tempo de duração da animaçãoanimation-timing-function: velocidade com que a animação é executada (easing)animation-delay: o delay para iniciar a animaçãoanimation-iteration-count: quantas vezes a animação será executadaanimation-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:
|
1 2 3 4 5 |
.c-component { animation-name: fade-out; animation-duration: 1s; animation-timing-function: ease-out; } |
Ou assim:
|
1 2 3 |
.c-component { animation: fade-out 1s ease-out; } |
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:
- Funções de tempo pré-definidas (através de palavras-chave)
- 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)easeease-inease-outease-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.
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:
|
1 2 3 |
.c-component { animation: fade-out 1s cubic-bezier(.51,1.93,.66,-1.61); } |
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.
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.