CSS3 Transiciones

Las transiciones css nos permiten cambiar los valores de las propiedades de las hojas de estilo suavemente durante un intervalo de tiempo. Estas suaves animaciones peden ser provocadas por distintos eventos: click, hover, focus, active, o con cualquier cambio provocado sobre el elemento. Actualmente para conseguir animar un botn cuando recibe uno de estos eventos necesitamos hacer uso de algn sprite o de cdigo javaScript si el efecto que le queremos dar a la transicin es ms especfico. Mediante las transiciones CSS, con tan solo unas pocas lneas de cdigo conseguiremos animar nuestros botones en poco tiempo y con efectos muy conseguidos.
VER EJEMPLO

Sintaxis
Nos vamos a encontrar con tres partes de la transicin en la declaracin: transition-property: La propiedad sobre la que se va a realizar la transicin transition-duration: Duracin de la transicin (ms-milisegundos, s-segundos) transition-timing-function: Como de rpido se da la transicin. Puede tomar los siguientes valores:
ease linear ease-in ease-out ease-in-out cubic-bezier

Retrasando la transicin
Existe la posibilidad de retrasar la animacin durante un intervalo de tiempo. Este efecto lo conseguiremos con el uso de transition-delay

Prefijos y metodo abreviado

Para que las transiciones funcionen correctamente en los navegadores que las soportan tendremos que utilizar los respectivos prefijos que utilizan cada una para hacer las declaraciones, as por ejemplo para el ejemplo que har a continuacin har 4 declaraciones.

-webkit-transition: background-position 10s linear; /* safari */ -moz-transition: background-position 10s linear; /* mozilla firefox */ -o-transition: background-position 10s linear; /* opera */ transition: background-position 10s linear; /* llamada genrica */

En este caso he utilizado el mtodo abreviado sin tener que hacer una declaracin por cada una de las propiedades de la transicin.

Soporte en los navegadores

Las transiciones son soportadas por los siguientes navegadores
ver soporte

Ejemplo
Necesitaris un navegador con soporte de transiciones para poder visualizar el ejemplo correctamente. En el apartado superior tenis un enlace a la tabla de soportes. La transicin se lanza con el evento hover, para poder verla en funcionamiento tendris que colocar el ratn sobre el fondo azul.