# Introdução a Animações CSS

> Domine os fundamentos de animações CSS do zero. Aprenda keyframes, propriedades animation-* e easings para criar experiências visuais impactantes. Anime!

URL: https://dpw.dev/css/animacoes-css-introducao/  
Publicado em: 2020-02-10  
Categoria: css  
Tags: animacao-css  
Autor: Tárcio Zemel

[Vídeo no YouTube](https://www.youtube.com/watch?v=T3H8hh5zOZQ)

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](/ux/motion-ui-principios-tipos-animacao-interface/), 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:

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

```scss
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
```

Ou até:

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

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

```typescript
.c-component {
  animation-name: fade-out;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
```

Ou assim:

```scss
.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".

![Introdução a Animações CSS: representação gráficas das funções de easing padrão de CSS.](/images/blog/animacoes-css-introducao/animacoes-css-introducao-easings-default.webp)

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`

![](/images/blog/animacoes-css-introducao/css-animation-easings-comparison.gif)

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:

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

<figure>

![Introdução a Animações CSS: ferramenta visual para encontrar valores de easing.](/images/blog/animacoes-css-introducao/animacoes-css-introducao-visual-cubic-bezier-easings.webp)

<figcaption>

É assim que seres humanos normais fazem. :)

</figcaption>

</figure>

Em nosso site [Recursos Front End](https://recursosfrontend.desenvolvimentoparaweb.com/) 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.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml