Junto con la introducción de CSS3 vienen muchas características nuevas que están disponibles para usar en la creación de grandes efectos; uno de los más útiles es la propiedad de transición .
La propiedad de transición es un nuevo desarrollo importante en CSS. Se puede usar para crear un efecto de cambio dinámico en un div o clase usando una estructura simple:
transition: property duration timing-function delay;La transición de CSS3 es una excelente manera de agregar un poco de animación a los sitios sin la gran sobrecarga de una biblioteca JavaScript como jQuery.
Antes de comenzar, puedes ver una demostración aquí de la propiedad de transición en acción .
En primer lugar, para que la propiedad de transición funcione, es necesario definir la propiedad estándar a la que se aplicará. Podría decirse que las dos propiedades más comunes que se definirán son ancho y alto. Para escribir la propiedad independiente, simplemente use:
transition-property: define propertyA continuación, una vez que se ha definido la propiedad, se deben asignar los valores de inicio y fin. En el caso de valores como ancho o alto, la propiedad debe establecerse con un valor inicial y luego un valor final con alguna otra condición.
Por ejemplo, aquí establecemos la propiedad de transición en ancho, luego el valor inicial de ancho y luego establecemos el valor final cuando el elemento está sobrevolado:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Ahora que hemos definido la propiedad para transformar, los valores de inicio y final, necesitamos definir la duración de la transición. Esto se logra definiendo una longitud en segundos o milisegundos como se muestra a continuación:
transition-duration: duration;Construyendo esto en el ejemplo, se crea el siguiente código:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Esto significa que el div principal se expandirá en 25px durante una duración de 5 segundos.
El código es suficiente para crear un buen efecto; sin embargo, podemos utilizar aún más la propiedad de transición CSS3 mediante el uso de la función de temporización. Usando esta propiedad, es posible alterar la curva de velocidad de la duración de la transición. La propiedad de transición se establece en una curva lineal de forma predeterminada. Sin embargo, puede definir la facilidad, la facilidad para entrar, la facilidad para salir, la facilidad para entrar y hasta la cúbica para modificar la curva de velocidad. Cubic-bezier le permite definir sus propios valores usando (n, n, n, n) donde n puede estar entre 0 y 1 (por ejemplo, lineal sería (0,0,1,1)).
Agregar este código a nuestro ejemplo da como resultado:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Además, al igual que la duración de la transición, el uso de la propiedad de demora de transición define una pausa antes de que comience el efecto de transición:
transition-delay: time;Finalmente, es importante considerar dos cosas al usar la propiedad de transición CSS3. En primer lugar, la mayoría de los navegadores en circulación en la actualidad requieren un prefijo del navegador para usarlo (las excepciones son IE10, Opera y Firefox16 +):
-moz-transition: para Firefox 15
-webkit-transition: para Chrome y Safari
(Tenga en cuenta que IE9 y versiones más bajas no son compatibles con la propiedad de transición).
En segundo lugar, aunque he usado la mano larga en los ejemplos anteriores para mayor claridad, se considera la mejor práctica escribir en forma abreviada, de la siguiente manera:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}¿Utiliza la propiedad de transición de CSS3? ¿Cómo se compara con tweens basados en jQuery? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen en movimiento a través de Shutterstock.