29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

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

10/02/2020

Tárcio Zemel

7min para ler

css animação css

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 1/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

Assine nossa newsletter e receba indicações

sensacionais 1 vez por mês!
Eu quero!

Introdução a Animações CSS

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

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 2/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

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.

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 3/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

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:

@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:

@keyframes fade-out {
from {
opacity: 1;
}
https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 4/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web
}
to {
opacity: 0;
}
}

Ou até:

1 @keyframes fade-out {
2   to {
3     opacity: 0;
4   }
5 }

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 @keyframes bounceIn {
2   0% {
3     transform: scale(0.1);
4     opacity: 0;
5   }
6   60% {
7     transform: scale(1.2);
8     opacity: 1;
9   }
10   100% {
11     transform: scale(1);
12   }
13 }

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 5/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

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.)

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 6/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

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 .c-component {
2   animation-name: fade-out;
3   animation-duration: 1s;
4   animation-timing-function: ease-out;
5 }

Ou assim:

1 .c-component {
2   animation: fade-out 1s ease-out;
3 }

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”.

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 7/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

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

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 8/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

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:

.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.

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 9/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

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

É 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

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 10/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

ATENÇÃO

Saiu o vídeo com Minicurso Animações CSS !

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.

Os benefícios de Animação de loading com

performance de animações CSS puro
CSS

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 11/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

Filtros CSS

0 Comentários 
1
Entrar

Iniciar a discussão...

FAZER LOGIN COM OU REGISTRE-SE NO DISQUS ?

Nome

1 Share

Mais votados Mais recentes Mais antigos

Seja o primeiro a comentar.

Conheça os tópicos do desenvolvimento para

web

CSS • Design • HTML • Indicações • JavaScript • Miscelânea • PHP

• SEO • UX • WordPress • Acessibilidade • Análise • Animação CSS
• API • Arquitetura da Informação • Básico da Web • Boas Práticas
• Carreira • Clientes • CSS Grid • dpw expo • Entrevista
• Estratégia de Conteúdo • Ferramentas • Flexbox • Gamificação
• Interface • jQuery • Layout • Motion UI • Performance • Planejamento
• Portfolio • React • Resenha • Sass • Segurança • Séries • Svelte
• Tipografia • Usabilidade • Web Design • Web Design Responsivo

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 12/13
29/01/2023 13:13 Introdução a Animações CSS | desenvolvimento para web

Facebook do dpw
Instagram do dpw
YouTube do dpw
Twitter do dpw
desenvolvimento para web é mantido pela webfatorial e usa a licença WTFPL.

https://desenvolvimentoparaweb.com/css/animacoes-css-introducao/#content 13/13