Animações

The CSS Podcast - 022: Animation

Às vezes, você encontra pequenos ajudantes nas interfaces que, quando clicados, fornecem informações úteis sobre essa seção específica. Eles geralmente têm uma animação pulsante para informar sutilmente que as informações estão ali e que você precisa interagir com elas. Neste módulo, mostramos como criar esses auxiliares e outras animações usando CSS.

É possível usar o CSS para definir uma sequência de animação com frames-chave. Essas sequências podem ser animações básicas de um estado ou sequências complexas baseadas em tempo.

O que é um frame-chave?

Na maioria das ferramentas de animação, os frames-chave são o mecanismo usado para atribuir estados de animação a carimbos de data/hora em uma linha do tempo.

Por exemplo, confira uma linha do tempo do ponto "auxiliar" piscando. A animação é executada por um segundo e tem dois estados.

Há um ponto específico em que cada um desses estados de animação começa e termina. Você mapeia isso na linha do tempo com frames-chave.

@keyframes

Browser Support

• 43
• 12
• 16
• 9

Source

O CSS @keyframes é baseado no mesmo conceito dos frames-chave de animação.

Confira um exemplo com dois estados:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

A primeira parte importante é o identificador personalizado (custom-ident), o nome da regra de keyframes. O identificador neste exemplo é my-animation. O identificador personalizado funciona como um nome de função, permitindo que você faça referência à regra de frames-chave em outro lugar no código CSS.

Observação: um <custom-ident> é usado em vários lugares no CSS para permitir que você forneça seu próprio nome para as coisas. Esses identificadores diferenciam maiúsculas de minúsculas e, em alguns casos, há palavras que não podem ser usadas. Por exemplo, ao nomear linhas no CSS Grid, não é possível usar a palavra span.

Na regra de frames-chave, from e to são palavras-chave que representam 0% e 100%, que são o início e o fim da animação. Você pode recriar a mesma regra assim:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Você pode adicionar quantas posições quiser durante o período. No exemplo de auxiliar de pulso, há dois estados que se traduzem em dois frames-chave. Isso significa que você tem duas posições dentro da regra de frames-chave para representar as mudanças de cada um deles.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

Propriedades animation

Browser Support

• 43
• 12
• 16
• 9

Source

Para usar o @keyframes em uma regra do CSS, defina várias propriedades de animação individualmente ou use a propriedade abreviada animation.

animation-duration

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-duration: 10s;
}

A propriedade animation-duration define o tempo que a linha do tempo @keyframes precisa ter como valor de tempo. O padrão é 0 segundo, o que significa que a animação ainda é executada, mas é muito rápida para ser percebida. Não é possível usar valores de tempo negativos.

animation-timing-function

Browser Support

• 43
• 12
• 16
• 9

Source

Para recriar o movimento natural na animação, use funções de temporização que calculam a velocidade de uma animação em cada ponto. Os valores calculados geralmente são curvados, fazendo com que a animação seja executada em velocidades variáveis ao longo de animation-duration e fazendo com que o elemento pareça pular se o navegador calcular um valor além dos definidos em @keyframes.

Há várias palavras-chave disponíveis como predefinições no CSS, que são usadas como o valor de animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

Os valores da função de suavização parecem curvados porque a suavização é calculada usando uma curva de Bézier, um tipo de função usada para modelar a velocidade. Cada uma das palavras-chave da função de temporização, como ease, faz referência a uma curva de Bézier predefinida. No CSS, é possível definir uma curva de Bézier diretamente usando a função cubic-bezier(), que aceita quatro valores numéricos: x1, y1, x2, y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Esses valores representam cada parte da curva ao longo dos eixos X e Y.

Entender as curvas de Bézier é complicado. Ferramentas visuais, como este gerador de Lea Verou, são muito úteis.

A função de transição steps

Às vezes, é possível ter um controle mais granular da animação movendo-a em intervalos, em vez de alongar uma curva. A função de suavização steps() permite dividir a linha do tempo em intervalos definidos de duração igual.

.my-element {
    animation-timing-function: steps(10, end);
}

O primeiro argumento é o número de etapas. Se houver o mesmo número de frames-chave que de etapas, cada frame-chave será reproduzido em sequência pelo tempo exato da etapa, sem transição entre os estados. Se houver menos frames-chave do que etapas, o navegador vai adicionar etapas entre frames-chave, dependendo do segundo argumento.

O segundo argumento é a direção. Se ele estiver definido como end, que é o padrão, as etapas serão concluídas no final da linha do tempo. Se ele estiver definido como start, a primeira etapa da animação será concluída assim que começar, o que significa que ela termina uma etapa antes de end.

animation-iteration-count

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-iteration-count: 10;
}

A propriedade animation-iteration-count define quantas vezes a linha do tempo @keyframes precisa ser executada durante a animação. Por padrão, esse valor é 1, o que significa que a animação é interrompida quando chega ao final da linha do tempo. Esse valor não pode ser negativo.

Para fazer o loop da animação, defina a contagem de iterações como infinite. É assim que a animação pulsante do início desta lição funciona.

animation-direction

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-direction: reverse;
}

É possível definir a direção em que a linha do tempo é executada nos frames-chave com animation-direction, que recebe os seguintes valores:

• normal: o valor padrão, que é para frente.
• reverse: é executado de forma regressiva na linha do tempo.
• alternate: para cada iteração de animação, a linha do tempo alterna entre execução para frente e para trás.
• alternate-reverse: semelhante a alternate, mas a animação começa com a linha do tempo correndo para trás.

animation-delay

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-delay: 5s;
}

A propriedade animation-delay define por quanto tempo o navegador espera antes de iniciar a animação. Assim como a propriedade animation-duration, ela aceita um valor de tempo.

Ao contrário de animation-duration, é possível definir animation-delay como um valor negativo, o que faz com que a animação comece no ponto correspondente da linha do tempo. Por exemplo, se a animação tiver 10 segundos e você definir animation-delay como -5s, a animação vai começar na metade da linha do tempo.

animation-play-state

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element:hover {
    animation-play-state: paused;
}

A propriedade animation-play-state permite reproduzir e pausar a animação. O valor padrão é running. Se você definir como paused, a animação será pausada.

animation-fill-mode

Browser Support

• 43
• 12
• 16
• 9

Source

A propriedade animation-fill-mode define quais valores na linha do tempo @keyframes persistem antes do início ou após o término da animação. O valor padrão é none, o que significa que, quando a animação é concluída, os valores na linha do tempo são descartados. Outras opções incluem:

• forwards: o último frame-chave persiste com base na direção da animação.
• backwards: o primeiro frame-chave persiste com base na direção da animação.
• both: o primeiro e o último keyframe permanecem.

Abreviação animation

Em vez de definir cada propriedade separadamente, você pode defini-las em uma abreviação animation, que permite definir as propriedades de animação na seguinte ordem:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Considerações ao trabalhar com animações

Os usuários podem definir o sistema operacional para preferir movimentos reduzidos ao interagir com aplicativos e sites. É possível detectar essa preferência usando a consulta de mídia prefers-reduced-motion:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Isso não é necessariamente uma preferência por nenhuma animação. É uma preferência por menos animação, especialmente menos animação inesperada. Saiba mais sobre essa preferência e o desempenho geral no guia de animação.

Teste seu conhecimento

Teste seus conhecimentos sobre animações

O nome ou identificador personalizado de uma animação @keyframes diferencia maiúsculas de minúsculas?

Sim

🎉

Não

O CSS não permite que duas animações tenham o mesmo nome, mas permite que SWOOP e swoop coexistam.

As palavras-chave from e to são iguais a:

start e end.

Tente novamente.

0% e 100%.

from é igual a 0% e to é igual a 100%.

0 e 1

Tente novamente.

O animation-timing-function também é conhecido como:

Temporização dinâmica

Tente novamente.

Atraso

Tente novamente.

Easing

🎉

Qual é o número mínimo de keyframes necessários em uma animação @keyframes?

1

O navegador vai usar o estado atual do elemento como um frame-chave. Portanto, é necessário ter pelo menos um frame-chave.

2

Tente novamente.

3

Tente novamente.

4

Tente novamente.