Las curvas de béziers las podemos emplear en todo tipos de programas de Procesamiento Digital de Imágenes como GIMP, Photoshop, etc para el trazado de dibujos; sin embargo, las curvas de béziers también son empleadas en distintos programas para crear modelados y animaciones como Blender.

Ya introduciéndonos en el tema que nos compete explicar, qué es la aplicación de las curvas de béziers para describir en cada fase de tiempo la velocidad de una Animaciones en CSS a través del valor cubic-bezier(p1x, p1y, p2x, p2y) aplicable a la propiedad transition-timing-function en CSS.

Sintaxis de la curva de béziers en CSS

El valor cubic-bezier(p1x, p1y, p2x, p2y) consta de cuatro puntos que son los que forman la curva como podemos ver a continuación:

Más información sobre la curvas de béziers en: Bézier curve.

Aunque esta entrada no profundizaremos en la construcción de las curvas de béziers que para eso hay abundante material en Internet.

Valores predefinidos Vs cubic-bezier en CSS

En esta sección veremos algunos ejemplo de curvas de béziers y su equivalente con valores predefinidos en la API de CSS; veamos.

(ease) Si la animación inicia lento, luego rápido para luego terminar lentamente: cubic-bezier(0.25,0.1,0.25,1):

(linear) Si la animación es constante cubic-bezier(0,0,1,1):

(ease-in) Si la animación inicia lento cubic-bezier(0.42,0,1,1):

(ease-out) Si la animación termina lento cubic-bezier(0,0,0.58,1):

Puedes obtener más información en el siguiente enlace: CSS3 transition-timing-function Property.

Con las curvas de béziers tenemos que establecer valores entre cero y uno y al no emplear un valor ya predefinido como mostramos anteriormente puede resultar un poco más complicado personalizar el comportamiento de las animaciones; para estos casos la gente de Google no echa una mano.

Google Chrome y las curvas de béziers en las animaciones CSS

Google Chrome al igual que muchos navegadores ofrecen una cantidad importante y útiles de herramientas que permiten a los desarrolladores web testear y probar nuevas cosas para sus aplicaciones web; una de estas herramienta la podemos encontrar en la consola de desarrolladores.

Al seleccionar nuestro elemento desde la consola que tenga aplicada la propiedad transition-timing-function o en su forma reducida a través de la propiedad animation (en nuestro ejemplo un span):

Veremos un icono como el siguiente en el tab style:

Al dar un clic sobre el mismo (según la animación establecida) veremos un panel como el siguiente:

Y al presionar en los nodos podemos alterar la curva de bézier y con ello describir en cada fase de tiempo la velocidad de una Animaciones en CSS:

Esta es sin duda una gran herramienta que permite "jugar" con distintos valores y probar varias combinaciones para así escoger la curva de bézier que más nos guste o se adapte a nuestras necesidades.