0

Tutorial de transiciones en CSS3

Desarrollo web

 

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.

Host Europe

Host Europe

Host Europe es más que un proveedor de hosting y dominios. Nos ganamos tu confianza día a día gracias a años de experiencia y el mejor servicio.

More Posts

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *