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.

El selector :first-child es usado para seleccionar un selector especifico, únicamente el primer hijo de su padre. :first-child pertenece a CSS 2.1 y se encuentra soportado por los siguientes navegadores:

Pongamos un ejemplo sencillo de su uso. Imaginar que tenemos la siguiente estructura HTML:

<div id="contenedor">
    <h2>Titular</h2>
    <div class="grupo"><p>Grupo 1</p></div>
    <div class="grupo"><p>Grupo 2</p></div>
    <div class="grupo"><p>Grupo 3</p></div>       
</div>

:first-child nos permite seleccionar el primer hijo de un padre concreto por lo que una de nuestras posibilidades sería dar un estilo concreto al <h2> que es el primer hijo de “contenedor”. A continuación os muestro el ejemplo el cual funciona perfectamente en IE7+

#contenedor h2:first-child {background-color: #809DA3; color: #FFF; border-bottom: 1px #FFF solid; margin-bottom: 5px;}

Como se puede ver en el ejemplo hemos conseguido asignar unos estilos concretos al titular.

Un error muy común en el que se suele caer es intentar dar un estilo concreto al primer hijo de un tipo específico. Por ejemplo, pongamos que queremos dar un estilo concreto al primer contenedor “grupo” englobado bajo el contenedor padre “contenedor”

#contenedor2 grupo:first-child {background-color: #809DA3; color: #FFF; border-bottom: 1px #FFF solid; margin-bottom: 5px;}

Como podemos ver no hemos conseguido ningún resultado ya que .grupo no es el primer hijo del contenedor padre, tan solo es el primer hijo de un tipo concreto, lo cual no es valido.

Para solucionar este problema tenemos dos posibilidades:

1. Una primera más insegura pero soportada por los navegadores actuales sería mediante el uso de otro selector CSS 2.1 como es “+”
2. La segunda mediante el selector de CSS3 :first-of-type. Una opción más segura pero poco soportada por los navegadores actuales