La Propiedad ANIMATION-TIMING-FUNCTION

Define la curva de velocidad de una animación. Esto determina cómo progresa la animación a lo largo de su duración, controlando la aceleración y desaceleración del cambio de las propiedades animadas.

 

La propiedad animation-timing-function en CSS define la curva de velocidad de una animación. Esto determina cómo progresa la animación a lo largo de su duración, controlando la aceleración y desaceleración del cambio de las propiedades animadas. En otras palabras, define el ritmo de la animación.

Sintaxis Básica

La sintaxis básica para usar la propiedad animation-timing-function es la siguiente:

CSS
 
selector {
  animation-timing-function: valor;
}

Donde selector es el elemento HTML al que quieres aplicar la animación y valor es la función de tiempo que deseas utilizar.

Valores de la Propiedad animation-timing-function

La propiedad animation-timing-function puede tomar varios valores predefinidos y también permite definir funciones personalizadas.

1. Valores Predefinidos

  • linear: La animación progresa a una velocidad constante de principio a fin. No hay aceleración ni desaceleración.

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: moverLineal;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear; /* Velocidad constante */
  }

  @keyframes moverLineal {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Lineal</div>

</body>
</html>

  • ease: Este es el valor predeterminado. La animación comienza lentamente, luego acelera en el medio y finalmente desacelera al final.

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation-name: moverEase;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease; /* Comienza lento, acelera, termina lento */
  }

  @keyframes moverEase {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Ease (por defecto)</div>

</body>
</html>

  • ease-in: La animación comienza lentamente y luego acelera hacia el final.

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
    animation-name: moverEaseIn;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in; /* Comienza lento, acelera al final */
  }

  @keyframes moverEaseIn {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Ease-in</div>

</body>
</html>

  • ease-out: La animación comienza rápidamente y luego desacelera hacia el final.

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: relative;
    animation-name: moverEaseOut;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-out; /* Comienza rápido, desacelera al final */
  }

  @keyframes moverEaseOut {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Ease-out</div>

</body>
</html>

  • ease-in-out: La animación comienza lentamente, acelera en el medio y luego desacelera al final (similar a ease, pero con una desaceleración más pronunciada al principio y al final).

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: relative;
    animation-name: moverEaseInOut;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out; /* Comienza lento, acelera, termina lento (más marcado) */
  }

  @keyframes moverEaseInOut {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Ease-in-out</div>

</body>
</html>

  • step-start: La animación salta inmediatamente al estado final al comienzo de la duración de la animación. No hay transición gradual.

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: cyan;
    position: relative;
    animation-name: moverStepStart;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: step-start; /* Salta al final al inicio */
  }

  @keyframes moverStepStart {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Step-start</div>

</body>
</html>

  • step-end: La animación permanece en su estado inicial hasta el final de la duración de la animación, momento en el que salta al estado final.

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: magenta;
    position: relative;
    animation-name: moverStepEnd;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: step-end; /* Permanece al inicio hasta el final */
  }

  @keyframes moverStepEnd {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Step-end</div>

</body>
</html>

  • steps(n, [ start | end ]?): Esta función divide la duración de la animación en n pasos iguales.

    • n: Un número entero positivo que especifica el número de pasos.
    • start (opcional, valor por defecto): El cambio de estado ocurre al principio de cada paso.
    • end (opcional): El cambio de estado ocurre al final de cada paso.

    Ejemplo:

    HTML
     
    <!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: brown;
    position: relative;
    animation-name: moverSteps;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: steps(4); /* 4 pasos, cambio al inicio */
  }

  .cuadro-end {
    animation-timing-function: steps(4, end); /* 4 pasos, cambio al final */
    margin-top: 20px;
  }

  @keyframes moverSteps {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Steps(4) - Inicio</div>
  <div class="cuadro cuadro-end">Steps(4, end) - Fin</div>

</body>
</html>

2. cubic-bezier(p1, p2, p3, p4)

Esta función te permite definir tu propia curva de velocidad personalizada utilizando una curva de Bézier cúbica. Los cuatro valores numéricos (entre 0 y 1) representan los puntos de control P1 y P2 de la curva.

  • p1 y p2: Controlan el punto de inicio de la curva.
  • p3 y p4: Controlan el punto final de la curva.

Puedes encontrar herramientas en línea (como cubic-bezier.com) para ayudarte a visualizar y generar los valores de cubic-bezier.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: teal;
    position: relative;
    animation-name: moverBezier;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Curva personalizada */
  }

  @keyframes moverBezier {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro">Cubic-bezier</div>

</body>
</html>

En este ejemplo, se utiliza una curva de Bézier cúbica personalizada para crear un efecto de "rebote" al final de la animación.

Ejemplos Prácticos

Puedes combinar diferentes funciones de tiempo para crear efectos visuales interesantes. Por ejemplo, podrías usar ease-in para una animación de entrada suave y ease-out para una animación de salida elegante.

Visualizando Funciones de Tiempo

Es muy útil visualizar las diferentes funciones de tiempo para entender cómo afectan la velocidad de la animación. Puedes encontrar gráficos y herramientas interactivas en línea que muestran cómo cada función de tiempo progresa a lo largo de la duración de la animación. Las herramientas de desarrollador de los navegadores también suelen ofrecer visualizaciones de las curvas de tiempo.

Casos de Uso Comunes

  • linear: Para animaciones que deben moverse a una velocidad constante, como una rueda giratoria.
  • ease: Para la mayoría de las animaciones generales, proporcionando un inicio y un final suaves.
  • ease-in: Para elementos que aparecen o se mueven hacia la pantalla.
  • ease-out: Para elementos que desaparecen o se mueven fuera de la pantalla.
  • ease-in-out: Una combinación de ease-in y ease-out, a menudo utilizada para transiciones.
  • step-start y step-end: Para animaciones que deben ocurrir en pasos discretos, como un cronómetro o una animación de sprites.
  • steps(): Útil para animar elementos en intervalos definidos.
  • cubic-bezier(): Para crear efectos de animación únicos y personalizados.

Consideraciones

  • La elección de la función de tiempo puede afectar significativamente la percepción de la animación. Experimenta con diferentes valores para encontrar el que mejor se adapte a tu diseño.
  • Las funciones step-* son útiles para animaciones que no requieren una transición suave.
  • cubic-bezier() ofrece una gran flexibilidad, pero puede requerir algo de experimentación para obtener el efecto deseado.

Conclusión

La propiedad animation-timing-function es una herramienta poderosa para refinar la sensación y el ritmo de tus animaciones CSS. Al elegir la función de tiempo adecuada, puedes hacer que tus animaciones sean más atractivas, naturales y personalizadas. ¡No dudes en probar los diferentes valores y explorar las posibilidades de las curvas de Bézier para llevar tus animaciones al siguiente nivel!