Propriedade CSS animation-timing-function

A propriedade animation-timing-function define como uma animação progride ao longo de cada ciclo — não ao longo de toda a animação. Ela define a curva de velocidade da animação: a taxa na qual o elemento animado se move de um keyframe para o próximo.

Esta página explica o que a propriedade faz, todos os valores que ela aceita (incluindo cubic-bezier() e steps()), como ela interage com @keyframes e o atalho animation, e os erros comuns que as pessoas cometem.

Por que a função de temporização é importante

A duração de uma animação informa quanto tempo um ciclo leva; a função de temporização informa como esse tempo é distribuído. Com a mesma duração de 5 segundos, linear se move em velocidade constante, enquanto ease entra lentamente, acelera no meio e desacelera até parar. Escolher a curva certa é a diferença entre um movimento que parece mecânico e um que parece natural.

As funções de temporização definem a interpolação entre os pontos de parada dos keyframes. Isso significa que você pode definir uma função de temporização diferente em keyframes individuais dentro de @keyframes — a função se aplica daquele keyframe para o próximo, não a toda a animação. Se um keyframe não especificar uma, o valor de animation-timing-function do elemento é usado para aquele intervalo.

A propriedade animation-timing-function é uma das propriedades CSS3.

Ela pode receber os seguintes valores:

• ease - (padrão) Começa lentamente, depois fica mais rápido e termina lentamente.
• ease-in - Começa lentamente, mas acelera no final.
• ease-out - Começa rapidamente, mas desacelera no final.
• ease-in-out - Começa lentamente e termina lentamente.
• step-start - Equivalente a steps(1, start).
• step-end - Equivalente a steps(1, end).
• linear - A animação tem a mesma velocidade durante toda a animação, geralmente mais adequada para mudanças de cor ou opacidade.
• steps(int, start|end) - Especifica uma função de degrau com dois parâmetros. O primeiro parâmetro define o número de intervalos na função. Deve ser maior que 0. O segundo parâmetro é "start" ou "end" e especifica o ponto em que a mudança de valores ocorre dentro do intervalo. Se o segundo parâmetro for omitido, "end" é usado.
• cubic-bezier(n,n,n,n) - Especifica valores personalizados para a função cubic-bezier. Os dois primeiros parâmetros definem as coordenadas X e devem estar entre 0 e 1. Os dois últimos parâmetros definem as coordenadas Y e podem ser qualquer número.

Quando vários valores separados por vírgula são especificados, eles mapeiam para as animações correspondentes definidas em animation-name em ordem. Se houver menos funções de temporização do que animações, a lista é repetida para corresponder ao total.

Entendendo cubic-bezier()

Todas as palavras-chave nomeadas são atalhos para uma curva cubic-bezier(). A função recebe quatro números — cubic-bezier(x1, y1, x2, y2) — que são os dois pontos de controle de uma curva de Bézier que vai de (0,0) até (1,1). O eixo X é o tempo (que deve ficar entre 0 e 1) e o eixo Y é o progresso da animação (que pode ultrapassar abaixo de 0 ou acima de 1 para criar efeitos de "salto" ou "antecipação").

As palavras-chave nomeadas são equivalentes a:

• linear → cubic-bezier(0, 0, 1, 1)
• ease → cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in → cubic-bezier(0.42, 0, 1, 1)
• ease-out → cubic-bezier(0, 0, 0.58, 1)
• ease-in-out → cubic-bezier(0.42, 0, 0.58, 1)

steps() e animações em degraus

Enquanto cubic-bezier() produz movimento suave, steps() salta entre estados discretos — útil para animações de sprite sheet ou o piscar de um cursor de digitação. steps(4, end) divide a animação em 4 saltos iguais; start faz com que o primeiro salto aconteça imediatamente, enquanto end (o padrão) o atrasa para o final de cada intervalo.

Armadilhas comuns

• Não é herdada e não é animável. Você não pode fazer transição da própria função de temporização.
• A ordem importa no atalho. Dentro do atalho animation, a função de temporização e o animation-delay são ambos valores <time>-ou-palavra-chave; o primeiro <time> é lido como a duração e o segundo como o atraso, então coloque a função de temporização antes do valor de atraso.
• Funções por keyframe têm prioridade. Uma função de temporização declarada em um keyframe dentro de @keyframes substitui o valor da propriedade para aquele segmento.

Sintaxe

Sintaxe da propriedade CSS animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)  | initial | inherit;

Exemplo da propriedade animation-timing-function com o valor "ease":

Exemplo da propriedade CSS animation-timing-function com o valor ease

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

Exemplo da propriedade animation-timing-function com o valor "ease-in":

Exemplo da propriedade CSS animation-timing-function com o valor ease-in

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        animation: element 7s infinite;
        animation-timing-function: ease-in;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h1>The animation-timing-function Property</h1>
    <div></div>
  </body>
</html>

Exemplo da propriedade animation-timing-function com diferentes funções de temporização:

Exemplo da propriedade CSS animation-timing-function com os valores linear, ease, ease-in, ease-out e ease-in-out

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        color: #eee;
        font-weight: bold;
        position: relative;
        text-align: center;
        padding: 8px;
        animation: mymove 5s infinite;
      }
      #div1 {
        animation-timing-function: linear;
      }
      #div2 {
        animation-timing-function: ease;
      }
      #div3 {
        animation-timing-function: ease-in;
      }
      #div4 {
        animation-timing-function: ease-out;
      }
      #div5 {
        animation-timing-function: ease-in-out;
      }
      @keyframes mymove {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
  </body>
</html>

Valores

Propriedades relacionadas

• animation — o atalho que define a função de temporização junto com nome, duração, atraso e mais.
• @keyframes — onde você define os pontos de parada da animação entre os quais a função de temporização interpola.
• animation-duration — define quanto tempo dura um ciclo; a função de temporização distribui o movimento ao longo dele.
• animation-name — vincula o elemento a uma regra @keyframes.
• transition-timing-function — o mesmo conceito de curva de velocidade aplicado a transições em vez de animações de keyframe.

Prática