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 do pulso no período de 1 segundo
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.

O mesmo diagrama de antes, mas desta vez, com frames-chave.
Animação pulsante com frames-chave.

@keyframes

Compatibilidade com navegadores

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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.

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

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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.

Uma curva de Bézier em um gráfico de progressão vs. tempo
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

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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

  • Chrome: 43.
  • Borda: 12.
  • Firefox: 16.
  • Safari: 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?

Não
Sim

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

0% e 100%.
0 e 1
start e end.

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

Atraso
Cronologia dinâmica
Easing

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

3
4
1
2