Propiedad CSS transition-timing-function

La propiedad CSS transition-timing-function especifica la curva de velocidad de una transición — es decir, cómo se calculan los valores intermedios a lo largo de la duración de la transición. No cambia cuánto tiempo dura una transición (eso es trabajo de transition-duration); en cambio, controla el ritmo entre valores.

¿Por qué importa esto? Una transición que se ejecuta a una velocidad perfectamente constante (linear) suele parecer robótica. El movimiento en el mundo real acelera y desacelera, por lo que la curva predeterminada ease — inicio lento, medio rápido, final lento — resulta mucho más natural a la vista. Elegir la función de temporización correcta es lo que separa una animación de interfaz pulida de una rígida.

La propiedad transition-timing-function es una de las propiedades CSS3.

Esta página cubre los valores de palabra clave, las potentes funciones cubic-bezier() y steps(), cómo establecer una curva diferente por propiedad y los errores más comunes.

Valores de palabra clave

La propiedad acepta estas curvas con nombre:

ease — inicio lento, rápido, final lento (el valor predeterminado)
linear — velocidad constante en todo momento
ease-in — inicio lento, acelera hacia el final
ease-out — inicio rápido, desacelera hacia el final
ease-in-out — inicio lento y final lento, más rápido en el medio
step-start — salta inmediatamente al valor final (sin valores intermedios)
step-end — mantiene el valor inicial y salta al final

Cada palabra clave es simplemente una abreviatura de una definición subyacente de cubic-bezier() o steps() — por ejemplo, linear equivale a cubic-bezier(0, 0, 1, 1) y ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1).

Valor inicial	ease
Se aplica a	Todos los elementos, pseudoelementos ::before y ::after.
Heredado	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.transitionTimingFunction = "ease";

Sintaxis

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;

Cuando se omite un valor, el navegador usa el valor inicial ease.

Ejemplo de transition-timing-function

En el ejemplo siguiente, dos propiedades se animan juntas. La primera función de temporización se aplica a la primera transition-property (background-color), y la segunda se aplica a left. La curva cubic-bezier() aquí sobrepasa intencionalmente 1 para que el cuadro rebote ligeramente más allá de su destino — algo que ninguno de los valores de palabra clave puede hacer.

Ejemplo 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>

Pruébalo tú mismo »

Ejemplo de transition-timing-function con los valores "ease", "linear", "ease-in" y "ease-out"

Ejemplo de código con 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>

Pruébalo tú mismo »

Pasa el cursor sobre el contenedor y observa cómo corren los cuatro círculos: linear mantiene un ritmo constante, ease-in se retrasa y luego alcanza, y ease-out sale disparado y luego se detiene suavemente.

Ejemplo de transition-timing-function con los valores "step-start" y "step-end"

Otro ejemplo 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>

Pruébalo tú mismo »

La función cubic-bezier()

Cada curva de palabra clave está construida sobre una curva de Bézier cúbica, y cubic-bezier(x1, y1, x2, y2) te permite definir la tuya propia. Los cuatro números son las coordenadas de dos puntos de control; el punto de inicio (0, 0) y el punto final (1, 1) son fijos.

/* 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);

Los valores x (x1, x2) deben mantenerse en el rango 0–1, pero los valores y pueden superarlo — así es exactamente como se crea un efecto de sobreimpulso o anticipación. Este es el valor más flexible y vale la pena usarlo cuando las palabras clave resultan demasiado genéricas.

La función steps()

steps(n, position) hace que la transición salte en n pasos discretos en lugar de moverse de forma fluida — útil para animaciones de sprites, efectos de máquina de escribir o cualquier cosa que deba "avanzar a pasos" en lugar de deslizarse.

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

El segundo argumento opcional decide si el salto ocurre al inicio o al final de cada intervalo (por defecto end). Las palabras clave step-start y step-end son simplemente steps(1, start) y steps(1, end).

Establecer una curva por propiedad

Cuando se hacen transiciones de varias propiedades a la vez, se puede proporcionar una lista separada por comas de funciones de temporización. Cada una se alinea con la entrada correspondiente en 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);

Si se proporcionan menos funciones de temporización que propiedades, la lista se repite; si se proporcionan más, los extras se ignoran.

Errores comunes

Solo controla el ritmo, no el tiempo. Una curva de aspecto más ágil no termina antes — cambia transition-duration para eso.
x debe mantenerse en [0, 1]. En cubic-bezier(), un valor x fuera de rango invalida toda la declaración y el navegador recurre a ease.
El orden importa en las listas. La función de temporización número N corresponde a la propiedad N en transition-property, no a un nombre — mantén las listas alineadas.
Prefiere la abreviatura transition para el código en producción; las propiedades individuales mostradas aquí son principalmente para mayor claridad.

Valores

Valor	Descripción
ease	El efecto de transición comienza lentamente, luego se vuelve más rápido y termina lentamente. Este es el valor predeterminado.
linear	El efecto de transición avanza a una velocidad constante de principio a fin.
ease-in	El efecto de transición comienza lentamente y acelera hacia el final.
ease-out	El efecto de transición comienza rápidamente, pero se ralentiza al final.
ease-in-out	El efecto de transición comienza lentamente y termina lentamente.
step-start	Equivalente a `steps(1, start)`.
step-end	Equivalente a `steps(1, end)`.
steps(int,start\|end)	Especifica una función escalonada con dos parámetros. El primer parámetro especifica el número de intervalos de la función. Debe ser mayor que 0. El segundo parámetro es el valor "start" o "end", e indica el punto en que ocurre el cambio de valores dentro del intervalo. Si no se aplica el segundo parámetro, se usa el valor "end".
cubic-bezier (n,n,n,n)	Especifica una curva de Bézier cúbica para definir la aceleración y desaceleración de la transición.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

La propiedad CSS transition-timing-function tiene los siguientes valores, excepto

ease-in-outstep-endpausedlinear