Transiciones en CSS3

Las trancisiones en CSS3 nos permiten animar elementos y sus propiedades sin necesidad de usar Flash o JavaScript.

Un ejemplo sería el siguiente, coloca el mouse sobre el siguiente recuadro:

Soporte de navegadores

Internet explorer no soporta la propiedad transition.
Chrome y Safari requieren el prefijo -webkit-
Firefox requiere el prefijo -moz-
Opera requiere el prefijo -o-

¡Tengo un navegador compatible! ¿Y ahora?

Las transiciones en CSS3 van de un estado inicial a uno final, cambiando una o varias propiedades de forma gradual. Para hacer esto es necesario definir que propiedad vamos a cambiar y cuánto tardará en hacerlo.

En el siguiente ejemplo cambiaremos la altura de un div:

div{
	background:#FF0;
	height:100px;
	margin:0 auto;
	width:100px;
	
	-webkit-transition: height .5s ease-in;
	-moz-transition: height .5s ease-in;
	-o-transition: height .5s ease-in;
	transition: height .5s ease-in;
}

Por defecto la duración de la transición es 0, por lo que si no se especifica, no tendrá efecto.

Ahora necesitamos un detonante que realice la transición. Utilizaremos el pseudoselector :hover.

div:hover{
	height:150px;
}

El resultado es el siguiente:

Si queremos cambiar más de una propiedad, debemos separarlas con comas:

div:hover{
	-webkit-transition: height .5s, width 1s, background .7s;
	-moz-transition: height .5s, width 1s, background .7s;
	-o-transition: height .5s, width 1s, background .7s;
	transition: height .5s, width 1s, background .7s;
}

Estas son las propiedades de transición que se pueden utilizar:

transition Propiedad general que define todos los parámetros
transition-property Especifica que propiedad cambiará la transición, pueden ser todas (all)
transition-duration Define la duración de la transición
transition-timing-function Especifica el tipo de transición que ejecutará, ease por defecto.
transition-delay Define si habrá un retraso para iniciar la transición, es 0 por defecto.

div{
	-webkit-transition-property: width;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: linear;
	-webkit-transition-delay: .5s;
	
	-moz-transition-property: width;
	-moz-transition-duration: 1s;
	-moz-transition-timing-function: linear;
	-moz-transition-delay: .5s;
	
	-o-transition-property: width;
	-o-transition-duration: 1s;
	-o-transition-timing-function: linear;
	-o-transition-delay: .5s;
	
	transition-property: width;
	transition-duration: 1s;
	transition-timing-function: linear;
	transition-delay: .5s;
}

Obviamente se puede definir esta misma transición con la propiedad general:

div{
	-webkit-transition: width 1s linear .5s;
	-moz-transition: width 1s linear .5s;
	-o-transition: width 1s linear .5s;
	transition: width 1s linear .5s;
}

Los diferentes tipos de transición son linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n).

Para el valor de cubic-bezier las n deben ser enteros.

En el siguiente video podemos ver la utilización de las transiciones: