Propriedade CSS transition-timing-function

A propriedade CSS transition-timing-function especifica a curva de velocidade de uma transição — ou seja, como os valores intermediários são calculados ao longo da duração da transição. Ela não altera quanto tempo uma transição leva (isso é função do transition-duration); em vez disso, controla o ritmo entre o início e o fim.

Por que isso importa? Uma transição que corre em velocidade perfeitamente constante (linear) geralmente parece mecânica. O movimento do mundo real acelera e desacelera, por isso a curva padrão ease — início lento, meio rápido, fim lento — parece muito mais natural aos olhos. Escolher a função de temporização certa é o que separa uma animação de interface refinada de uma rígida.

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

Esta página aborda os valores por palavra-chave, as poderosas funções cubic-bezier() e steps(), como definir uma curva diferente por propriedade e as armadilhas mais comuns.

Valores por palavra-chave

A propriedade aceita estas curvas nomeadas:

ease — início lento, rápido no meio, fim lento (o padrão)
linear — velocidade constante durante toda a transição
ease-in — início lento, acelera em direção ao fim
ease-out — início rápido, desacelera em direção ao fim
ease-in-out — início e fim lentos, mais rápido no meio
step-start — salta imediatamente para o valor final (sem valores intermediários)
step-end — mantém o valor inicial e salta somente ao final

Cada palavra-chave é apenas um atalho para uma definição subjacente de cubic-bezier() ou steps() — por exemplo, linear equivale a cubic-bezier(0, 0, 1, 1) e ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1).

Valor Inicial	ease
Aplica-se a	Todos os elementos, pseudo-elementos ::before e ::after.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.transitionTimingFunction = "ease";

Sintaxe

Valores de CSS transition-timing-function

transition-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;

Quando um valor é omitido, o navegador usa o valor inicial ease.

Exemplo de transition-timing-function

No exemplo abaixo, duas propriedades são animadas juntas. A primeira função de temporização aplica-se à primeira transition-property (background-color) e a segunda aplica-se a left. A curva cubic-bezier() aqui ultrapassa intencionalmente 1, fazendo a caixa ricochetear levemente além do destino — algo que nenhum dos valores por palavra-chave consegue fazer.

Exemplo de código CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        padding: 2em;
        width: 40px;
        height: 40px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
        left: 450px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <p>Hover over the element to see the effect</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo de transition-timing-function com os valores "ease", "linear", "ease-in" e "ease-out"

Exemplo de código com valores de CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: ease;
      }
      .el2 {
        transition-timing-function: linear;
      }
      .el3 {
        transition-timing-function: ease-in;
      }
      .el4 {
        transition-timing-function: ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: ease;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: linear;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-timing-function: ease-in;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-timing-function: ease-out;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Passe o cursor sobre o container e observe os quatro círculos: linear mantém um ritmo constante, ease-in atrasa e depois alcança, e ease-out dispara à frente e depois desacelera.

Exemplo de transition-timing-function com os valores "step-start" e "step-end"

Outro exemplo de CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: step-start;
      }
      .el2 {
        transition-timing-function: step-end;
      }
    </style>
  </head>
  <body>
    <h2> Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;</code>
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

A função cubic-bezier()

Cada curva por palavra-chave é construída sobre uma curva de Bézier cúbica, e cubic-bezier(x1, y1, x2, y2) permite que você defina a sua própria. Os quatro números são as coordenadas de dois pontos de controle; o ponto inicial (0, 0) e o ponto final (1, 1) são fixos.

/* a gentle ease-out */
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

/* an overshoot/"bounce" — the y values can go below 0 or above 1 */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

Os valores de x (x1, x2) devem ficar no intervalo 0–1, mas os valores de y podem ultrapassá-lo — é exatamente assim que se cria um efeito de ultrapassagem ou antecipação. Este é o valor mais flexível e vale a pena utilizá-lo quando as palavras-chave parecem genéricas demais.

A função steps()

steps(n, position) faz a transição avançar em n passos discretos em vez de se mover suavemente — útil para animações de sprite sheet, efeitos de máquina de escrever ou qualquer coisa que deva "ticar" em vez de deslizar.

/* 4 equal jumps */
transition-timing-function: steps(4, end);

O segundo argumento opcional decide se o salto ocorre no início ou no fim de cada intervalo (padrão é end). As palavras-chave step-start e step-end são simplesmente steps(1, start) e steps(1, end).

Definindo uma curva por propriedade

Quando você transiciona várias propriedades ao mesmo tempo, pode fornecer uma lista de funções de temporização separadas por vírgula. Cada uma se alinha com a entrada correspondente em transition-property:

transition-property: background-color, transform;
transition-duration: 0.3s, 0.6s;
transition-timing-function: ease-out, cubic-bezier(0.68, -0.55, 0.27, 1.55);

Se você fornecer menos funções de temporização do que propriedades, a lista é repetida; se fornecer mais, os extras são ignorados.

Armadilhas comuns

Ela apenas controla o ritmo, não o tempo. Uma curva com aparência mais rápida não termina antes — altere transition-duration para isso.
x deve ficar em [0, 1]. Em cubic-bezier(), um valor de x fora do intervalo torna toda a declaração inválida e o navegador volta a usar ease.
A ordem importa nas listas. A N-ésima função de temporização corresponde à N-ésima transition-property, não a um nome — mantenha as listas alinhadas.
Prefira o atalho transition para código em produção; as propriedades longas mostradas aqui servem principalmente para maior clareza.

Valores

Valor	Descrição
ease	O efeito de transição começa lentamente, acelera e termina lentamente. Este é o valor padrão.
linear	O efeito de transição avança em velocidade constante do início ao fim.
ease-in	O efeito de transição começa lentamente e acelera em direção ao fim.
ease-out	O efeito de transição começa rapidamente, mas desacelera no final.
ease-in-out	O efeito de transição começa e termina lentamente.
step-start	Equivalente a `steps(1, start)`.
step-end	Equivalente a `steps(1, end)`.
steps(int,start\|end)	Especifica uma função de degraus com dois parâmetros. O primeiro parâmetro especifica 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 não for aplicado, o valor "end" é usado.
cubic-bezier (n,n,n,n)	Especifica uma curva de Bézier cúbica para definir a aceleração e desaceleração da transição.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Prática

A propriedade CSS transition-timing-function possui os seguintes valores, exceto

ease-in-outstep-endpausedlinear