Introducción a las transiciones con CSS

Las transiciones usando CSS son la parte interesante que trae Firefox 4 y que ya existía en otros navegadores como Chrome y Opera; de este modo, aún cuando en Internet Explorer no funcionen, el hecho que un 50% de los usuarios (o más, dependiendo de las estadísticas que se miren) utilicen estos navegadores ya nos permite jugar un poco con ellas.

De todos modos, como cualquier otro "efecto especial", bien puede armonizarse o utilizarse de manera sutil para que los visitantes puedan navegar correctamente aún cuando algunos de ellos no accedan a esas "modernidades".

Una transición es aquello que ocurre entre un momento y otro.

Estamos acostumbrado a ciertos efectos como el hover sobre un texto; es simple, ese texto tiene un color y cuando ponemos el cursor encima, el color cambia. Ha habido una "transición" pero, esta es instantánea; estas nuevas propiedades, entre otras cosas, nos permiten controlar el tiempo que durará ese cambio entre un estado y otro lo que generará una animación simple porque durante ese proceso, la propiedad o propiedades irán cambiando, yendo de un estado inicial a otro final.

Un ejemplo para no hacerse lio.

A la izquierda se ve el efecto hover normal; al poner el cursor encima, el color de fondo cambia de blanco a negro y en el de la derecha pasa lo mismo excepto que el tiempo que tarda es mayor y durante ese tiempo, ese color va virando lentamente mostrando tonos de gris.

La propiedad básica para conseguir esto se denomina transition pero los navegadores sólo la entienden si se utilizan sus prefijos así que tendremos tres versiones distintas que tienen el mismo nombre y la misma sintaxis pero que varían en ese prefijo:

-moz-transition en Firefox
-webkit-transition en Chrome y Safari
-o-transition en Opera

Por lo general, no suele usarse esa propiedad que es la forma resumida sino que se "divide" del mismo modo que lo hacemos con muchas otras. En este caso, son cuatro:

transition-property
transition-duration
transition-timing-function
transition-delay

Pero no hay que asustarse porque para los casos más simples basta usar las dos primeras.

¿Qué hacen? Voy a mostrarlas sin subfijos para no estar escribiendo mucho pero, hay que recordar que deben agregarse o no funcionarán.

transition-property es la que utilizamos para indicar cuál o cuales son las propiedades a cambiar; si son varias, las separamos con comas:

transition-property: color;
transition-property: color, opacity, width;

transition-duration es el tiempo que durará el efecto y también podemos colocar un solo valor o varios, separados por comas; si hacemos esto último, le estamos diciendo al navegador que cada propiedad indicada por transition-property tenga un tiempo de transicion distinto. En todos los casos, el valor está expresado en segundo:

transition-duration: 1s;
transition-duration: 1s, 4s;

Con esas ya podemos crear el efecto anterior que no es otra cosa que un efecto hover:

<style>
.demo {
background-color:#FFF;
-moz-transition-property: background-color;-moz-transition-duration: 2s;
-webkit-transition-property: background-color;-webkit-transition-duration: 2s;
-o-transition-property: background-color;-o-transition-duration: 2s;
}
.demo:hover {
background-color:#000;
-moz-transition-property: background-color;-moz-transition-duration: 2s;
-webkit-transition-property: background-color;-webkit-transition-duration: 2s;
-o-transition-property: background-color;-o-transition-duration: 2s;
}
</style>

<div class="demo"></div>

¿Por qué ponemos las transiciones en ambas reglas? Porque el efecto funcionará en ambos sentidos, se verá cuando colocamos el cursor encima y tambien cuando lo sacamos. Esto no es obligatorio, puede hacerse un efecto en un solo sentido sin problemas.

Las propiedades a las que podemos agregar efectos son muchas; en este ejemplo cambiamos el color de fondo y su ancho (width):

Casi todas las propiedades pueden sufrir efectos te transición: colores, fondos, bordes, tamaños, posiciones, fuentes, opacidad, sombras, márgenes, etc:

¿más?