Transiciones con css3

Como dije en un posteo anterior uno de los propósitos de css3 es el de cubrir aquellas funcionalidades que css2 estaba limitado a hacer y para ello muchas veces debía recurrirse a otras tecnologías como Javascript. Una de ellas, las transiciones, los movimientos animados de los elementos. Pensemos en algo básico y crudo, una imagen con un tamaño específico que al pasarse el mouse por encima cambia su ancho y su alto:

Ver ejemplo

<html xmlns="https://www.w3.org/1999/xhtml">
 <head>
 <title>Aca va el titulo de la pagina</title>
    <style type="text/css">
       #el_principito {
          width: 150px;
          height: 135px;
          opacity: 0.1;
       }
       #el_principito:hover {
          width: 480px;
          height: 433px;
          opacity: 1.0;
       }
    </style>
 </head>
 <body>
    <img id="el_principito" src="images/el_principito.jpeg" alt="El principito" />
 </body>
</html>

 

¿Se ve mal no? Tal vez en los 90 se hubiese visto normal, pero con los avances que han habido en las aplicaciones web de los últimos años las páginas suelen tener animaciones, transiciones y otros tipo de efectos visuales. Para darle un poco de vida a esa imagen deberíamos aplicar funcionalidades de Javascript como Jquery que permiten hacer transiciones mucho más fáciles.

Sin embargo con css3 se puede conseguir un efecto de transición con la propiedad transition.

Ver ejemplo

<html xmlns="https://www.w3.org/1999/xhtml">
 <head>
    <title>Aca va el titulo de la pagina</title>
    <style type="text/css">
       #el_principito {
          width: 150px;
          height: 135px;
          opacity: 0.1;
          transition: 1s width, 1s height, 2s opacity;
          -moz-transition: 1s width, 1s height, 2s opacity;
          -webkit-transition: 1s width, 1s height, 2s opacity;
       }
       #el_principito:hover {
          width: 480px;
          height: 433px;
          opacity: 1.0;
          transition: 1s width, 1s height, 2s opacity;
          -moz-transition: 1s width, 1s height, 2s opacity;
          -webkit-transition: 1s width, 1s height, 2s opacity;
       }
    </style>
 </head>
 <body>
    <img id="el_principito" src="images/el_principito.jpeg" alt="El principito" />
 </body>
</html>

 

Analicemos un poco el código. La propiedad transition puede recibir varias transiciones separadas por coma, en cada transición tendremos que aclarar los segundos que durará la misma y una propiedad que queremos que pasen por esa transición. Por ejemplo al aplicárselo a la propiedad width el ancho del elemento se agrandará o achicará en forma animada.