Tutorial de transiciones en CSS3

Aprende cómo aplicar ocho efectos sencillos para tu página web. Siete de ellos se controlan gracias a la propiedad Transition. Las transiciones en CSS3 sirven para modificar el valor de una propiedad en un elemento HTML para que de un estado inicial se pase a otro final de una forma gradual y durante un tiempo determinado.

Para ello, tienes que crear un div dentro de una página HTML de la siguiente forma:

<!DOCTYPE html>
  <html>
  <head>   
        <style type="text/css">   
        </style>
  </head>
  <body>   
        <div class="cuadrado"></div>
  </body>
  </html>

.

Tras esto y para que tenga unas dimensiones tienes que establecer el ancho, el alto, el color de fondo y cómo no, su propiedad de transición.

<style type="text/css">
 .cuadrado
 {
 width:300px;
 height:250px;
 background:#FAB400;
 transition:all 0.3s;

}
 </style>

Los valores de la propiedad transition son tres:
1.- las propiedas para la transición, que en este caso sería all.
2.- La velocidad de la transición (0,5 segundos)
3.- El cambio de la forma en cuanto a aceleración y desaceleración, que en este caso queda en blanco para hacer uso del valor predeterminado por defecto.

1. Cambiar de color
Pon la clase div en “color” y determina el color que hayas elegido en tu CSS:

.color:hover

{
      background:#53a7ea;
  }

2. Aumentar o reducir
Pon la clase de su div a “grow” y después añade el código que te indicamos a tu bloque de estilos. Si quieres ampliar un elemento solo tienes que especificar un valor superior a 1:

.grow:hover

{
     -webkit-transform: scale(1.3);
     -ms-transform: scale(1.3);
     transform: scale(1.3);
  }

En nuestro ejemplo sería:

<div class="grow cuadrado"></div>

Para reducirlo, deberás realizar la operación inversa: especificar un valor inferior a 1:

.shrink:hover
  {
     -webkit-transform: scale(0.8);
     -ms-transform: scale(0.8);
     transform: scale(0.8);
  }

En nuestro ejemplo sería:

<div class="shrink cuadrado"></div>

3. Rotación de elementos
Para rotar un elemento pon en tu div la clase “rotate” y añade el siguiente CSS:

.rotate:hover
  {
     -webkit-transform: rotateZ(-30deg);
     -ms-transform: rotateZ(-30deg);
     transform: rotateZ(-30deg);
  }

En nuestro ejemplo sería:

<div class="rotate cuadrado"></div>

4. Disolver (fade in)
Pon en la clase del div “fade”. Para disolver un elemento es necesario hacerlo en dos partes. Primero tienes que establecer su estado inicial, y a continuación, el cambio:

.fade
  {
     opacity:0.5;
  }
  .fade:hover
  {
     opacity:1;
  }

En nuestro ejemplo sería:

<div class="fade cuadrado"></div>

5. Inset Border
Establece en tu div la clase “border” y agrega lo siguiente a tus estilos:

.border:hover
  {
     box-shadow: inset 0 0 0 25px #003666;
  }

En nuestro ejemplo sería:

<div class="border cuadrado"></div>

6. Sombreado en 3D
Para crear una sombra en 3D primero tienes que añadir una caja de sobra para después mover dicho elemento usando las propiedades transform y translate en el eje x para que así de la sensación de crecer fuera de la pantalla.
Dale a tu div la clase “threed” y añade a tus estilos este código CSS:

.threed:hover
  {
     box-shadow:
     1px 1px #003666,
     2px 2px #003666,
     3px 3px #003666;
     -webkit-transform: translateX(-3px);
     transform: translateX(-3px);
  }

En nuestro ejemplo sería:

<div class="threed cuadrado"></div>

7. De cuadrado a círculo
Tan simple como darle a tu div la clase “circle” y añadir este CSS a tus estilos:

.circle:hover

{
    border-radius:50%;

}

En nuestro ejemplo sería:

<div class="circle cuadrado"></div>

8. Balanceo (swing)
Este último elemento no utiliza la propiedad de transition. Es una animación bastante más compleja ya que hace uso de @keyframes, animation y animation-iteration. Primero tienes que añadir en los estilos de tu CSS:

@-webkit-keyframes swing
  {
     15%
     {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
     }
     30%
     {
         -webkit-transform: translateX(-5px);
         transform: translateX(-5px);
     }
     50%
     {
         -webkit-transform: translateX(3px);
         transform: translateX(3px);
     }
     65%
     {
         -webkit-transform: translateX(-3px);
         transform: translateX(-3px);
     }
     80%
     {
         -webkit-transform: translateX(2px);
         transform: translateX(2px);
     }
     100%
     {
        -webkit-transform: translateX(0);
        transform: translateX(0);
     }
  }

@keyframes swing
  {
     15%
     {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
     }
     30%
     {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
     }
     50%
     {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
     }
     65%
     {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
     }
     80%
     {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
     }
     100%
     {
        -webkit-transform: translateX(0);
        transform: translateX(0);
     }
  }

Con esta animación solo mueves el elemento de izquierda a derecha, lo único que tienes que hacer a continuación, es aplicarlo

.swing:hover
  {
      -webkit-animation: swing 1s ease;
      animation: swing 1s ease;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
  }

En nuestro ejemplo sería:

<div class="swing cuadrado"></div>

Puedes probar las transiciones en CSS3 con tus propios elementos en http://jsfiddle.net. ¿Te han gustado estos trucos? Si es así, deja un comentario o búscanos en Twitter o en Facebook.