¿Qué es animation timing function en CSS?

Si quieres controlar con precisión cómo se desarrollan las animaciones de una página web, es probable que te hayas encontrado con la propiedad animation timing function en CSS. Pero, ¿qué hace exactamente esta propiedad y cómo puede ayudarte a mejorar la experiencia del usuario? En este artículo, te contaremos para qué sirve la animation timing function, cuáles son sus valores más comunes y cómo puedes aplicarla en tus proyectos web.

¿Qué es la animation timing function en CSS?

La propiedad animation timing function en CSS es la propiedad que controla el progreso de una animación durante cada ciclo. En otras palabras, define cómo se distribuye el tiempo de una animación, controlando el ritmo y la velocidad en los diferentes puntos de la misma, para que el cambio de un estilo a otro sea más natural o impactante.

Si alguna vez has visto una animación en una página web que empieza lenta, acelera en el medio y luego desacelera al final, lo más probable es que esté usando animation timing function para ajustar el ritmo de esa animación.

La principal diferencia entre animation timing function y otras funciones similares como transition timing function se origina en sus propósitos y contextos de aplicación. Por una parte, la propiedad animation timing function se utiliza para controlar, a lo largo de su duración, el ritmo de las animaciones definidas por @keyframes, lo que permite crear secuencias de movimiento más complejas y detalladas. Por el otro lado, la propiedad transition timing function se aplica a las transiciones entre dos estados, por lo general, activadas por eventos como :hover o :focus. Esta se utiliza para gestionar cambios más simples y directos en las propiedades de los elementos.

¿Para qué sirve animation timing function?

No todas las animaciones deben tener la misma velocidad constante. Una animación lineal puede parecer más rígida y aburrida, mientras que una con aceleración y frenado puede ser mucho más atractiva. Por eso, usar animation timing function puede ser muy útil en los siguientes casos:

• Hacer animaciones más naturales y realistas: Esta propiedad te permite ajustar la aceleración y desaceleración de las animaciones, imitando más fielmente el movimiento natural de los objetos físicos, lo que resulta en una experiencia visual más convincente y agradable.
• Mejorar la experiencia del usuario: Generalmente, las animaciones suaves y bien controladas hacen que la interacción con tu sitio web sea más agradable e intuitiva, pues enfatizan en los elementos con los que el usuario puede interactuar. En ese sentido, facilita la navegación y aumenta la satisfacción del usuario.
• Personalizar el diseño: Implementar esta función te permite destacar elementos específicos de tu diseño y personalizar el ritmo de la animación para lograr un mayor impacto visual. De esta manera, puedes elegir entre valores predefinidos o crear tus propias curvas de animación con cubic-bezier().

Además, es una propiedad muy fácil de implementar, ya que solo necesitas añadir una línea de código CSS para definir el ritmo de la animación. En ese sentido, no necesitas JavaScript ni herramientas externas para aplicar efectos visuales atractivos.

Sintaxis básica de animation timing function

Antes de pasar a ver los valores de la propiedad animation timing function, veamos cómo se aplica la propiedad en tu código CSS:

@keyframes mover {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

.cuadrado {
  width: 50px;
  height: 50px;
  background-color: blue;
  animation-name: mover;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

En este caso, creamos una animación para un cuadrado azul que se mueve 200 píxeles hacia la derecha. De esta manera, utilizamos @keyframes para definir el movimiento, y aplicamos estilos en la clase .cuadrado. La animación mover, dura 2 segundos y se repite indefinidamente. Por su parte, la propiedad animation-timing-function: ease-in-out hace que la animación comience lentamente, se acelere en el medio y desacelere al final, para crear un movimiento suave y continuo.

Valores principales de animation timing function

Los valores principales de animation timing function en CSS son los que determinan cómo se ajusta la velocidad de una animación durante cada ciclo. Veamos a continuación algunos de los más comunes y utilizados.

linear

Con este valor, la animación avanza a una velocidad constante desde el principio hasta el final.

animation-timing-function: linear;

ease

Este es el valor por defecto en las animaciones de CSS. Aquí, la animación comienza lentamente, se acelera en el medio y desacelera al final.

animation-timing-function: ease;

ease-in

En este caso, la animación comienza lentamente y se acelera hacia el final.

animation-timing-function: ease-in;

ease-out

Contrario al caso anterior, con ease-out, la animación comienza rápidamente y desacelera hacia el final.

animation-timing-function: ease-out;

ease-in-out

Este valor combina los dos anteriores, de manera que la animación comienza y termina lentamente, pero se acelera en el medio.

animation-timing-function: ease-in-out;

cubic-bezier(n,n,n,n)

Este valor te permite crear una curva personalizada utilizando cuatro valores numéricos entre 0 y 1. De esta manera, tienes mayor control y precisión sobre el ritmo de la animación.

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Ejemplo de animation timing function en CSS con diferentes valores

Ahora que conoces los valores más importantes, veamos un ejemplo de aplicación de animation timing function utilizando diferentes valores:

En este ejemplo, tenemos tres cuadrados que se mueven 200 píxeles hacia la derecha utilizando diferentes valores de animation-timing-function:

• En cuadrado1, usamos el valor linear, de manera que la animación se mueve a una velocidad constante.
• En cuadrado2, el valor ease indica que la animación comienza lentamente, se acelera en el medio y desacelera al final.
• En cuadrado3, usamos una curva cubic-bezier personalizada, lo que nos da un control más preciso sobre el ritmo de la animación.

¿Cómo usar animation timing function para mejorar la UX?

Ahora que ya conoces los valores principales y has visto cómo puedes aplicarlos, ¿te interesa saber cómo puedes aplicar esto en tu día a día como desarrollador para mejorar la experiencia del usuario al navegar por tu página? Si es así, te presentamos algunas ideas:

1. Resaltar botones: Usa ease-out para que la animación sea más suave al final, ya que este tipo de movimiento hace que los botones resalten de manera más natural y agradable. Además, esto ayuda a dirigir la atención del usuario hacia los elementos interactivos, lo que hará que tu página sea más intuitiva y agradable de usar.
2. Animar menús: Aplicar ease-in puede hacer que los elementos entren de forma sutil y no sean invasivos. Esto es muy importante porque evita que las animaciones sean bruscas o perturbadoras para el usuario, haciéndolas, en cambio, más cómodas para el ojo y menos distractoras.
3. Crear microinteracciones: Las microinteracciones mejoran la experiencia del usuario porque brindan una retroalimentación visual clara y atractiva. En ese sentido, un movimiento suave y personalizado hace que las animaciones sean más interesantes y ayuda a guiar la atención del usuario hacia los elementos que quieres resaltar. Para esto, combina ease-in-out o cubic-bezier para dar un toque personalizado a tus animaciones.  

Como puedes ver, la propiedad animation timing function en CSS es una función muy útil con la que puedes crear animaciones con estilo y precisión. De esta manera, si quieres usar una animación más simple, puedes optar por un valor como ease. En cambio, si quieres un efecto más elaborado, puedes conseguirlo con cubic-bezier. Lo importante es que esta propiedad te permite ajustar el ritmo de tus animaciones a tus necesidades y mejorar la experiencia del usuario para que tu página web sea estética, funcional y memorable.

Puedes continuar aprendiendo sobre animaciones y otras propiedades útiles en CSS y HTML uniéndote a nuestro Bootcamp de Desarrollo Web, donde encontrarás los contenidos y las herramientas que necesitas para crear sitios más útiles y modernos. Nuestros cursos están diseñados para ofrecerte la información más actualizada y demandada, para que puedas empezar a trabajar en poco tiempo en el sector IT.

¡Tu nueva carrera en tecnología está esperando!