La propiedad transition-timing-function especifica la curva de velocidad de un efecto de transición. Determina qué tan rápido inicia y termina una animación, así como el ritmo con el que progresa.

transition-timing-function: time_function;

Existen palabras clave esenciales que describen las diferentes time_functions:

• ease - Valor por defecto. Un efecto de transición con un inicio lento, luego rápido, y termina lentamente;
• linear - Mantiene una velocidad constante durante toda la transición;
• ease-in - Un efecto de transición con un inicio lento;
• ease-out - Un efecto de transición con un final lento;
• ease-in-out - Un efecto de transición con un inicio y final lentos, y una parte media rápida.

Ejecutemos el siguiente ejemplo para observar la diferencia entre ellas. La transición funcionará únicamente al pasar el cursor sobre el container.

Curva de Bézier cúbica

También se puede utilizar la función cubic-bezier() para crear una timing-function personalizada. Esta función toma cuatro valores que representan los puntos de control de una curva Bézier cúbica, lo que determina la forma de la función de temporización.

Nota

No hay problema. No es necesario tener conocimientos de matemáticas para generar la función cubic bezier como valor de propiedad css. Se puede utilizar la fuente https://cubic-bezier.com/ para generar nuestras funciones personalizadas.

Consideremos el siguiente ejemplo para ver lo sencillo que es utilizarlo. La función cubic-bezier se generó arrastrando los puntos en esa fuente.

Como resultado, podemos copiar la función de la parte superior a nuestro archivo css.