Animações

A animação é uma ótima maneira de destacar elementos interativos e adicionar interesse e divertidos nos seus designs. Neste módulo, você vai aprender a adicionar e controlar de animação com CSS.

Às vezes você encontra pequenos auxiliares em interfaces informações sobre a seção em que elas estão quando você clica nelas. Elas geralmente têm animação pulsante para informar sutilmente que a informação está lá e as pessoas precisam interagir. Este módulo mostra como criar esses auxiliares e outras animações usando CSS.

Os ícones pulsantes são uma forma de garantir que os usuários preste atenção às informações importantes.

Use 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 a animação estados a carimbos de data/hora em uma linha do tempo.

Por exemplo, esta é uma linha do tempo para o "helper" pulsante ponto A animação é executada por 1 segundo e tem dois estados.

Os estados da animação pulsante.

Há um ponto específico em que cada um desses estados da animação começa e termina. Mapeie-os na linha do tempo com frames-chave.

Animação pulsante com frames-chave.

@keyframes

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

CSS @keyframes são baseados no mesmo conceito dos frames de animação dos frames-chave.

Confira um exemplo com dois estados:

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

A primeira parte importante é identificador personalizado (custom-ident), o nome da regra de frames-chave. O identificador neste exemplo é my-animation. O identificador personalizado funciona como o nome de uma função, permitindo que você faça referência à regra de frames-chave em outro lugar do 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 em CSS Grade. Não é possível usar a palavra span.

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

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

Você pode adicionar quantas posições quiser ao longo do período. No exemplo auxiliar pulsante, há dois estados que são convertidos em dois frames-chave. Isso significa que você tem duas posições dentro da regra de frames-chave para representam as alterações de cada um desses frames-chave.

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

Tente editar a regra pulse para ver como a animação mudanças.

As propriedades animation

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

Para usar o @keyframes em uma regra CSS, é possível definir várias opções de animação propriedades individualmente ou use a animation propriedade abreviada.

animation-duration

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

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

O objeto animation-duration define o comprimento da linha do tempo @keyframes como um valor temporal. O padrão é 0 segundos, o que significa que a animação ainda é executada, mas será rapidamente para você ver. Não é possível usar valores de tempo negativos.

animation-timing-function

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

Para ajudar a recriar o movimento natural em uma animação, você pode usar funções de tempo que para calcular a velocidade de uma animação em cada ponto. Os valores calculados geralmente são curvo, fazendo com que a animação seja executada em velocidades variáveis ao longo do animation-duration e fazer com que o elemento pareça quicar se o navegador calcula 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 animation-timing-function: linear, ease, ease-in, ease-out e ease-in-out.

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

Tente mudar a função de marcação de tempo da animação usa.

Os valores da função de easing parecem curvar porque o easing é calculado utilizando uma Curva de Bézier, um tipo de função usada para modelar a velocidade. Em cada um dos horários palavras-chave de função, como ease, fazem 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 plotam cada parte da curva ao longo dos eixos X e Y.

Um exemplo de curva de Bézier.

Compreender as curvas de Bézier é complicado. Ferramentas visuais, como esta gerador de Lea Verou, foram muito úteis.

A função de easing steps

Às vezes, convém ter um controle mais granular da animação ao movendo-se em intervalos, em vez de ao longo de uma curva. A função de easing steps() permite divida 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 como etapas, cada frame-chave é reproduzido em sequência pela duração exata do etapa, sem transição entre estados. Se houver menos frames-chave do que etapas, o navegador adicionará etapas entre dependendo do segundo argumento.

O segundo argumento é a direção. Se ele estiver definido como end, que é o padrão, as etapas terminam no fim da linha do tempo. Se ele estiver definido como start, a primeira etapa da animação termina assim que começa, ou seja, ela termina uma etapa antes de end.

Compare as animações com e sem etapas.

animation-iteration-count

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

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

O método animation-iteration-count define quantas vezes a linha do tempo @keyframes deve ser executada durante o animação. Por padrão, é 1, o que significa que a animação será interrompida quando chega ao fim da sua linha do tempo. Esse valor não pode ser um número negativo.

Tente mudar a contagem de iterações desta animação.

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

A animação pulsante se repete infinitamente.

animation-direction

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

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

É possível definir a direção que a linha do tempo passa sobre os frames-chave com o animation-direction, que assume os seguintes valores:

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

Tente mudar a direção da animação.

animation-delay

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

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

O método animation-delay define quanto tempo o navegador aguarda antes de iniciar a animação. Assim como a propriedade animation-duration, esse método usa um valor de tempo.

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

Tente mudar o atraso da animação.

animation-play-state

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

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

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.

Mantenha o cursor sobre o elemento animado para pausar a animação.

animation-fill-mode

Compatibilidade com navegadores

• 43,00
• 12
• 16
• 9

Origem

animation-fill-mode define quais valores na sua linha do tempo @keyframes persistem antes que a animação começa ou termina. O valor padrão é none, o que significa que quando a animação estiver concluída, os valores na linha do tempo serã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 frame-chave são mantidos.

Tente mudar o modo de preenchimento.

A abreviação animation

Em vez de definir cada propriedade separadamente, você pode defini-las de uma maneira 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ção

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

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

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

Teste um exemplo de animação reduzida.

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 é o mesmo que 0% e to é igual a 100%.

0 e 1

Tente novamente.

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

Cronologia dinâmica

Tente novamente.

Atraso

Tente novamente.

Easing

🎉

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

1

O navegador usa o estado atual do elemento como um frame-chave. Por isso, é necessário no mínimo um frame-chave.

2

Tente novamente.

3

Tente novamente.

4

Tente novamente.