La función transition-timing-function especifica la curva de velocidad de un efecto de transición. Determina la velocidad a la que comienza y se detiene una animación y el ritmo al que progresa.

Hay 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 - Tiene 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 un final lentos, y un medio rápido.

Vamos a ejecutar el siguiente ejemplo para ver la diferencia entre ellos. La transición sólo funcionará al pasar el ratón por encima del container.

Curva cúbica de Bezier

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

Nota

No se preocupe. No necesitamos conocimientos de matemáticas para generar la función bezier cúbica como valor de una propiedad css. Podemos utilizar el cubic-bezier.com fuente para generar nuestras funciones personalizadas.

Consideremos el siguiente ejemplo para ver lo fácil que es utilizarlo. La función cubic-bezier se generó con la ayuda de arrastrar los puntos en esa fuente.

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