Tutorial - Animaciones usando CSS3 transitions

En este tutorial vamos a aprender como crear unas sencillas transiciones aumentando el tamaño de la imagen que nos permiten las nuevas propiedades de CSS3.

Para este ejercicio utilizaremos las propiedades de transition. Todavía no son reglas estandarizadas al 100% y por tanto en nuestra hoja de estilos deberemos incluir el prefijo de los diferentes propietarios de los diferentes motores render de navegadores (-webkit, -moz, -ms, -o).

Vamos a empezar con nuestro documento HTML . Crearemos una lista dentro de nuestro contenedor que nos servirá para poner en línea los diferentes elementos de a los que les aplicaremos los efectos de transición mediante CSS3.

Dentro de cada elemento de lista tendremos una imagen, un encabezado y un párrafo descriptivo.

<div class="wrap">    
  <ul>        
    <li class="juego">            
      <img src="img/juego01.jpeg" title="Animaciones usando CSS3 transitions" alt=" Animaciones usando CSS3 transitions">            
      <h2>Carcassonne</h2>            
      <p>Los Cátaros</p>        
    </li>        
    <li class="juego">            
      <img src="img/juego02.jpeg" title="Animaciones usando CSS3 transitions" alt=" Animaciones usando CSS3 transitions">            
      <h2>Caylus</h2>            
      <p>Felipe IV de Francia</p>        
    </li>        
    <li class="juego">            
      <img src="img/juego03.jpeg" title="Animaciones usando CSS3 transitions" alt=" Animaciones usando CSS3 transitions">            
      <h2>Catan</h2>            
      <p>La Gran Caravana</p>        
    </li>    
  </ul>
</div>
<!-- .wrap -->

Así es como nos quedaría la vista con el maquetado básico.

Y si añadimos el :hover nos debería mostrar de la siguiente manera:

Con este primer paso solo tenemos un cambio básico de un estado a otro y lo que queremos es que haya un movimiento suave y que vaya creciendo la imagen con las nuevas funcionalidades de CSS3.

En primer lugar vamos a pasarle la regla de transición a cada elemento de nuestra lista declarado con la clase .juego. Como comentábamos antes, al no estar estandarizado pondremos los prefijos de los navegadores propietarios.

Con este shorthand le decimos a la regla transition que anime a todos los elementos contenidos que sean animables (all), depués le decimos el tiempo (300 milisegundos) y con la propiedad ease-out le decimos que vaya de más lento a más rápido. Esto se basa en las ecuaciones de las curvas de beizer y si quieres amplíar el funcionamiento de este tipo de curvas en CSS3 puedes visitar la página de Ceaser de Matthew Lein y probar todos los efectos que te permite.

.juego {    
  width:200px;    
  padding:2em 1em 1em 1em;    
  text-align: center;    
  -webkit-transition: all 300ms ease-out;    
  -moz-transition: all 300ms ease-out;    
  -ms-transition: all 300ms ease-out;    
  -o-transition: all 300ms ease-out;    
  transition: all 300ms ease-out;
}

Por otro lado vamos a darle estilos a las imágenes de los juegos. Por una parte reduciremos el tamaño al 90% para que la animación sea más acentuada mediante la regla transform y la propiedad scale.

.juego img {    
  margin:auto;    
  display:block;    
  -webkit-transform: scale(.9);    
  -moz-transform: scale(.9);    
  -ms-transform: scale(.9);    
  -o-transform: scale(.9));    
  transform: scale(.9);    
  -webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);    
  -moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);    
  -ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);    
  -o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);    
  transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
  /* easeOutQuad */
}

En estas últimas transformaciones hemos optado por tomar uno de los ajustes predefinidos que comentábamos antes de las curvas Beizer, en este caso el easeOutQuad.

Pasamos ahora a modificar el estado :hover de nuestros elementos de lista así como de las imágenes que están contenidas y que es lo que realmente nos dará un aspecto fresco a nuestros elementos de lista.

.juego:hover {    
  background-color:white;    
  background-color: rgba(200,200,200,.3);    
  -webkit-border-radius: 10px;    
  border-radius: 10px;    
  cursor: pointer;
}

.juego:hover img {    
  -moz-transform: scale(1);    
  -webkit-transform: scale(1);    
  -o-transform: scale(1));    
  -ms-transform: scale(1);    
  transform: scale(1);
}

.juego:hover h2 {    
  color:#c9a833;
}

Podemos observar que le hemos dado 1 al valor de escalado que antes tenía 0.9 y que de esta forma y se escalará con una transición diferente a la de la opacidad pero que es muy similar. Es un poco más lenta la animación de la imagen por tanto la opacidad y el redondeado del elemento de lista acabará antes que el de la imagen.