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 botón cuando recibe uno de estos eventos necesitamos hacer uso de algún sprite o de código javaScript si el efecto que le queremos dar a la transición es más específico. Mediante las transiciones CSS, con tan solo unas pocas líneas de código conseguiremos animar nuestros botones en poco tiempo y con efectos muy conseguidos.

VER EJEMPLO

Sintaxis

Nos vamos a encontrar con tres partes de la transición en la declaración:

• transition-property: La propiedad sobre la que se va a realizar la transición
• transition-duration: Duración de la transición (ms-milisegundos, s-segundos)
• transition-timing-function: Como de rápido se da la transición. Puede tomar los siguientes valores:
  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier

Retrasando la transición

Existe la posibilidad de retrasar la animación 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 continuación 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 genérica */

En este caso he utilizado el método abreviado sin tener que hacer una declaración por cada una de las propiedades de la transición.

Una de las ventajas más esperadas de CSS3 es la posibilidad de insertar varios fondos en un mismo elemento, esto nos permitirá que nuestro HTML sea mucho más simple y evitaremos problemas de divitis.

Como siempre voy a realizar un ejemplo muy sencillo y vamos viendo como utilizarlo. Me he descargado una serie de imágenes que representan distintos estados meteorológicos (nubes, sol y nubes, lluvia y un arco iris) y vamos a intentar plasmarlas todas ellas sobre un mismo contenedor.

VER EJEMPLO

Creo el contenedor sobre al que vamos a asignar las imágenes

<div class="fondo1"></div>

Sintaxis Multiple backgrounds

A continuación asignamos tantos fondos a nuestro contenedor como queramos

<style>
    .fondo1{height: 517px; background:		                         
		  url(img/nube-sol.png) no-repeat  10% 20px,
		  url(img/lluvia.png) no-repeat  18% 280px,
		  url(img/lluvia.png) no-repeat  27% 192px,	
	    	  url(img/lluvia.png) no-repeat  30% 225px,
		  url(img/lluvia.png) no-repeat  42% 140px,
		  url(img/lluvia.png) no-repeat  48% 320px,
		  url(img/lluvia.png) no-repeat  53% 60px,
		  url(img/lluvia.png) no-repeat  60% 120px,
		  url(img/lluvia.png) no-repeat  64% 20px,
                  url(img/nube.png) no-repeat  69% 120px,
		  url(img/nube.png) no-repeat  75% 360px,								 
		  url(img/nube.png) no-repeat  80% 220px,								  
		  url(img/nube.png) no-repeat  90% 120px,								  							  
		  url(img/nube.png) no-repeat  96% 200px,									 
		  url(img/nube.png) no-repeat  98% 20px,
		  url(img/arcoiris.jpg) no-repeat  100% 300px;
}</style>

Como podéis ver hemos creado un solo contenedor sin tener que recurrir a una estructura del tipo:

   <div id="fondo1">
       <div id="fondo2">
       </div>
   </div>

Cuanto antes declaremos un fondo menor z-index tendrá este. Según he colocado yo mis fondos el arco iris será el elemento que tendrá más profundidad, a continuación las nubes, seguido de la lluvia y por último el sol.