Funciones easing personalizadas para css usando cubic-bezier

Stay hungry, stay foolish

Steve Jobs

Las animaciones que se pueden crear utilizando transiciones en  CSS3 permiten agregar un valor easing a la propiedad: transition-timing-function  la cual controla la velocidad a la que se ejecutará dicha animación. Existen algunos valores por defecto como son :  ease, ease-in, ease-out y linear. Pero podemos agregar valores personalizados utilizando la función cubic-bezier.

Las curvas bezier son generalmente utilizadas para la generación de curvas y trazados en computadoras, programas como Adobe Illustrator, Corel Draw las utilizan. La curva se genera por la unión de los cuatro puntos como se aprecia en la siguiente imagen:

02-bezier-curve-drawing

 

En CSS las curvas bezier se pueden definir con la función cubic-bezier de la siguiente forma:


cubic-bezier(P0,P1,P2,P3);

 

Veamos un ejemplo de como utilizarlo para animar el desplazamiento de un elemento

#figura{
width:100px;
height:100px;
float:left;
background:rgb(98,19,125);

/* Agregar a la propiedad transition la propiedad cubic-bezier
*  transition: duracion transition-timing-function */
-webkit-transition: 2s cubic-bezier(.96,.98,.88,.04); 
-moz-transition: 2s cubic-bezier(.96,.98,.88,.04); 
-o-transition: 2s cubic-bezier(.96,.98,.88,.04); 
transition: 2s cubic-bezier(.96,.98,.88,.04); 
}
#figura:hover{
-webkit-transform: translateX(200px) rotate(360deg) scale(.7) ;
-moz-transform: translateX(200px) rotate(360deg) scale(.7);
-o-transform: translateX(200px) rotate(360deg) scale(.7);
-ms-transform: translateX(200px) rotate(360deg) scale(.7);
transform: translateX(200px) rotate(360deg) scale(.7);
}

Resultado

 

 
Existen algunas herramientas que podemos utilizar para generar diferentes efectos con la función cubic-bezier aquí les dejo algunas de ellas: Ceaser y cubic-bezier.