Propiedad CSS animation-timing-function

La propiedad animation-timing-function define cómo progresa una animación a lo largo de la duración de cada ciclo — no a lo largo de toda la animación. Establece la curva de velocidad de la animación: la tasa a la que el elemento animado se desplaza de un fotograma clave al siguiente.

Esta página explica qué hace la propiedad, todos los valores que acepta (incluyendo cubic-bezier() y steps()), cómo interactúa con @keyframes y el atajo de animación, y los errores más comunes que suelen cometer los desarrolladores.

Por qué importa la función de temporización

La duración de una animación indica cuánto tarda un ciclo; la función de temporización indica cómo se distribuye ese tiempo. Con la misma duración de 5 segundos, linear se mueve a una velocidad constante, mientras que ease avanza lentamente al principio, se acelera en el centro y frena al detenerse. Elegir la curva correcta marca la diferencia entre un movimiento que se siente mecánico y uno que se siente natural.

Las funciones de temporización definen la interpolación entre los fotogramas clave. Esto significa que se puede establecer una función de temporización diferente en fotogramas clave individuales dentro de @keyframes — la función se aplica desde ese fotograma clave hasta el siguiente, no a toda la animación. Si un fotograma clave no especifica ninguna, se utiliza el valor de animation-timing-function del elemento para ese intervalo.

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

Puede tomar los siguientes valores:

• ease - (predeterminado) Comienza lentamente, luego se acelera y termina lentamente.
• ease-in - Comienza lentamente, pero se acelera al final.
• ease-out - Comienza rápido, pero se desacelera al final.
• ease-in-out - Comienza lentamente y termina lentamente.
• step-start - Equivalente a steps(1, start).
• step-end - Equivalente a steps(1, end).
• linear - La animación tiene la misma velocidad durante toda su duración; se usa con frecuencia para cambios de color u opacidad.
• steps(int, start|end) - Especifica una función escalonada con dos parámetros. El primer parámetro define el número de intervalos en la función. Debe ser mayor que 0. El segundo parámetro es el valor "start" o "end", e indica el punto en que se produce el cambio de valores dentro del intervalo. Si se omite el segundo parámetro, se utiliza "end".
• cubic-bezier(n,n,n,n) - Especifica valores personalizados para la función cubic-bezier. Los dos primeros parámetros definen las coordenadas X y deben estar entre 0 y 1. Los dos últimos parámetros definen las coordenadas Y y pueden ser cualquier número.

Cuando se especifican varios valores separados por comas, se asocian a las animaciones definidas en animation-name en orden. Si hay menos funciones de temporización que animaciones, la lista se repite para igualar la cantidad.

Entendiendo cubic-bezier()

Todas las palabras clave con nombre son atajos de una curva cubic-bezier(). La función acepta cuatro números — cubic-bezier(x1, y1, x2, y2) — que son los dos puntos de control de una curva de Bézier que va de (0,0) a (1,1). El eje X representa el tiempo (que debe mantenerse entre 0 y 1) y el eje Y representa el progreso de la animación (que puede sobrepasar por debajo de 0 o por encima de 1 para crear efectos de "rebote" o "anticipación").

Las palabras clave con nombre equivalen 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() y animaciones escalonadas

Mientras que cubic-bezier() produce un movimiento suave, steps() salta entre estados discretos — útil para animaciones de hojas de sprites o el parpadeo de un cursor de escritura. steps(4, end) divide la animación en 4 saltos iguales; start hace que el primer salto ocurra de inmediato, mientras que end (el valor predeterminado) lo retrasa hasta el final de cada intervalo.

Errores comunes

• No es heredable ni animable. No se puede animar la propia función de temporización.
• El orden importa en el atajo. Dentro del atajo animation, la función de temporización y animation-delay son ambos valores <time>-o-palabra-clave; el primer <time> se interpreta como la duración y el segundo como el retraso, así que coloca la función de temporización antes del valor de retraso.
• Las funciones por fotograma clave tienen prioridad. Una función de temporización declarada en un fotograma clave dentro de @keyframes anula el valor de la propiedad para ese segmento.

Sintaxis

Sintaxis de la propiedad 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;

Ejemplo de la propiedad animation-timing-function con el valor "ease":

Ejemplo de la propiedad CSS animation-timing-function con el 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>

Ejemplo de la propiedad animation-timing-function con el valor "ease-in":

Ejemplo de la propiedad CSS animation-timing-function con el 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>

Ejemplo de la propiedad animation-timing-function con diferentes funciones de temporización:

Ejemplo de la propiedad CSS animation-timing-function con los valores linear, ease, ease-in, ease-out y 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

Propiedades relacionadas

• animation — el atajo que establece la función de temporización junto con el nombre, la duración, el retraso y más.
• @keyframes — donde se definen los puntos de la animación entre los que la función de temporización interpola.
• animation-duration — establece cuánto dura un ciclo; la función de temporización distribuye el movimiento a lo largo de él.
• animation-name — vincula el elemento a una regla @keyframes.
• transition-timing-function — el mismo concepto de curva de velocidad aplicado a las transiciones en lugar de a las animaciones por fotogramas clave.

Práctica