Utilizamos cookies y tecnologías similares propias y de terceros, de sesión o persistentes, para hacer funcionar de manera segura nuestra página web y personalizar su contenido. Igualmente, utilizamos cookies para medir y obtener datos de la navegación que realizas. Puedes configurar y aceptar el uso de cookies a continuación. Asimismo, puedes modificar tus opciones de consentimiento en cualquier momento visitando nuestra Política de cookies. y obtener más información haciendo clic aquí.
 
Recuperar contraseña    
Usuarios Online:  1
English French German Italian Portuguese Spanish
 
 
Inicio | Blogs | Recursos y trucos para programación Web

Recursos y trucos para programación Web

9
NOV.
2014
 
 
 

El tiempo en las transiciones CSS: la función cubic-bezier

Publicado por Desarrollo Multimedia Team | domingo, 9 de noviembre de 2014 a las 10:23 h.
7051  
 

Cubic-bezier ¿suena raro verdad? Pues es la curva de tiempo que usan todas las transiciones CSS, además de ser un valor mas de la propiedad "transition-timing-function". Dicho de otro modo, cuando realizamos una transición CSS, tenemos que especificar como se moverá la animación, seleccionando entre distintas funciones de tiempo como: ease, linear, ease-in, ease-out, etc. Pues bien,  todas estas funciones están basadas en la función cubic-bezier, la cual podemos adaptar a nuestro gusto.

Cubic-bezier y las funciones de tiempo predefinidas
 
Echando un vistazo a w3schools, podemos ver perfectamente como cada una de las funciones de tiempo predefinidas, por así decirlo, emplean la curva bezier:
 
  • ease: especifica que la transición CSS comenzara lentamente, luego ira mas rápida, y terminara reduciendo su velocidad otra vez, lo que equivalente a cubic Bezier (0.25,0.1,0.25,1).
  • linear: especifica que la transición sera constante, con la misma velocidad de principio a fin. Equivalente a cubic-bezier (0,0,1,1).
  • ease-in: en este caso la transición CSS tendrá un comienzo lento equivalente a cubic-bezier (0.42,0,1,1).
  • ease-out: en el extremo opuesto al anterior, tenemos una transición con un final lento, lo que equivale a cubic-bezier (0,0,0.58,1).
  • ease-in-out: si combinamos los dos anteriores, el resultado seria un inicio y un final lento. Equivalente a cubic-bezier (0.42,0,0.58,1).
     
Y si seguimos leyendo, en la misma página tambien nos explica como personalizar la curva en las transiciones CSS:
 
  • cubic-bezier(n,n,n,n): donde n es un valor entre 0 y 1. Jugando con estos valores, vamos a poder obtener la velocidad deseada en cada momento de la animación.
     
Otra cosa de la que me he dado cuenta haciendo pruebas, es que aunque en w3schools diga que los valores van de 0 a 1, estos limites se pueden llevar mas lejos en nuestras transiciones CSS, por lo que se podrían poner valores negativos o mayores de 1. Por ejemplo este código también seria válido:
 
transition-timing-function: cubic-bezier(.86,-1.15,.48,1.68);
-webkit-transition-timing-function: cubic-bezier(.86,-1.15,.48,1.68);

Ejemplo de transición simple con curva personalizada

Crear una transición CSS con una función de tiempo personalizada, es tan sencillo como añadir la propiedad cubic-bezier y darle los valores que necesitemos. Seria algo asi:

HTML

<div id="contenedor">
    <div class="coche"></div>
</div>

CSS

#contenedor{
 
    overflow:hidden;
}
#contenedor:hover .coche{
             
    margin-left:100%;
    transition:all 2s;
    -webkit-transition:all 2s;
    transition-timing-function: cubic-bezier(1,.46,.48,1.68);
    -webkit-transition-timing-function: cubic-bezier(1,.46,.48,1.68);
}
.coche{
         
    background: url(coche.png) no-repeat center;
    width:200px;
    height:100px;      
}

Con lo que obtendríamos el siguiente resultado:

Pasa el puntero por encima para animar.

Fornas sencillas de calcular los valores para la curva bezier

Para no estar probando valores al azar hasta conseguir que la transición se mueva como queremos, existen generadores de CSS en los que podemos modificar la curva de forma visual, y  probar los efectos en una animación. Estas son algunas

  • CSS cubic-bezier Builder. Esta aplicación web de Rob La Placa nos permite modificar la curva, y compara su animación con todas las funciones predefinidas al mismo tiempo, mediante el desplazamiento de una serie de cuadrados. En la parte de abajo muestra el código entero de las transiciones CSS, con sus respectivos prefijos para cada navegador.
  • Cubic-bezier. Similar a la anterior pero en esta podemos guardar las curvas que vayamos generando. Al terminar pulsar "save" y se abrirá una ventana con los dígitos listos para pegar en nuestro CSS. 
  • Ceaser. Esta aplicación de Matthew Lein nos permite probar la curva con distintos tipos de animación, como width, height y opacity. Ademas cuenta con varios tipos de curva predefinidos, aparte de los que ya existen por defecto.

No esta de más reconocer que este articulo esta basado en otro similar que el autor leyó en honkiat 

Artículo seleccionado del Blog de Agustin Baraza en www.nosolocss.com/

 
 
¿Te ha gustado el artículo? ¡Suscríbete YA!
Únicamente recibirás un breve resumen mensual de los últimos post