Crea un dibujo animado con CSS3.

Práctica general sobre diferentes técnicas de animación CSS, en el que realizamos un dibujo animado por varios elementos que tienen diferentes particualidades.

En el presente ejercicio vamos a ver cómo podemos animar un dibujo con CSS 3 en varios puntos, que nos darán una idea global de las posibilidades de las animaciones CSS y nos ofrecerán una práctica completa de las técnicas que que hemos visto hasta el momento.

En lo relacionado a las animaciones de objetos con CSS ya hemos visto algunos ejemplos interesantes con técnicas que vamos a utilizar en el presente artículo. Los ejemplos vistos hasta ahora son la animación de texto, el fondo de tipo Matrix y el fondo con los copos de nieve. En este artículo vamos a mezclarlo todo y realizar un dibujo con distintas animaciones.

Si lo deseas, puedes comenzar viendo el resultado final de este ejemplo. Pero ten en cuenta que de momento funciona sólo con Chorme o Safari.

Para la realización de esta práctica, lo primero que vamos a hacer es crear un fondo simple para nuestra animación. Algo como esto:

A continuación vamos a crear una nube, que se vaya moviendo por el cielo de nuestro dibujo.

Una vez que tenemos la nube, colocamos en nuestro archivo CSS el siguiente código:

@-webkit-keyframes nube {

from {
left: 100px;
opacity: 1;

}

to {
left: 300px;
opacity: 0;
}

}

#nube{
position:relative;
-webkit-animation-name: nube;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: ease-in;

}

Del fotograma clave no hay mucho que comentar, simplemente va de 100px a 300px y va perdiendo opacidad, es decir, va haciéndose más transparente a medida que se mueve hacia la derecha, con lo que va desapareciendo de nuestro dibujo. 

En cuanto a la animación pues es más de lo mismo, dura 3 segundos y va y viene a su posición inicial.

Ahora vamos a animar el árbol para que veamos como caen sus hojas, para ello nos creamos una hoja y colocamos el siguiente código en nuestro CSS:

@-webkit-keyframes hojas{
   from {
      top: 150px;
      opacity: 1;
   }
   to {
      top: 400px;
      opacity: 0;
   }
}
@-webkit-keyframes hoja{
   0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
   100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}

#hoja div {
   position: absolute;
   top: -40px;
   -webkit-animation-name: hoja, hojas;
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-direction: normal; 
   -webkit-animation-timing-function: ease-in;
}
.hojas {   
   position: absolute;   
}
.hojas.f1 {
   left: 40px;
   -webkit-animation-duration: 5s;   
}
.hojas.f2 {
   font-size: 1.8em;
   left: 100px;
   -webkit-animation-duration: 7s;   

}

Como podéis ver tenemos dos fotogramas clave, uno que nos dice cómo se van a mover todas las hojas que caen del árbol y el otro que nos dice el movimiento que va a realizar cada hoja por separado.

Después hemos ido dando propiedades a las hojas, con unas propiedades generales definidas en el DIV hoja y luego propiedades especificas para cada hoja, creo que no hace falta explicarlas porque las hemos visto todas en artículos anteriores de nuestro manual de CSS 3.

Y por último nos queda la animación del muñeco que hemos colocado. Para ello hemos realizado un dibujo con el tronco, las piernas y la cabeza y después hemos dibujado los brazos por separado que son los que se van a mover. Esta es la animación más complicada ya que hacer cuadrar los brazos con el tronco y conseguir el movimiento adecuado ha resultado un poco lioso y aun así no ha terminado de salir perfecto. Su código CSS es el siguiente:

@-webkit-keyframes mano2 {
   0% {    
      -webkit-transform: rotate(0deg) translate(0px,0px);
   }
   100% {
      -webkit-transform: rotate(-60deg) translate(0px,0px);   
   }
}

#manoderecha{
   position: absolute;
   top:250px;
   left:279px;
   width:-10px;
}

#manoizquierda{
   position: absolute;
   top:250px;
   left:340px;
   width:8px;
   -webkit-animation-name: mano2;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate; 
}

Esto lo que hace es dejarnos la mano derecha fija y la izquierda nos está saludando. Todo esto utilizando las propiedades ya vistas.

Con esto terminamos nuestro código CSS para las animaciones y nos falta un estilo más para nuestro ejemplo.

#container{      
   background: #666 url(images/fondo-muneco2.jpg) no-repeat;
   width: 600px;
   height: 400px;      
   position: relative;   
}

#situacion {
   width: 200px;
   position: absolute;
   left: 300px;
   top: 200px;
}

Uno para las propiedades del dibujo en general y el de situación para colocar el muñeco en la posición deseada.

Ahora ya sólo nos queda el código HTML que es el siguiente:

<!DOCTYPE html> 
<html> 

<head> 
   
   <title>Dibujo animado CSS 3</title> 
<link rel="stylesheet" href="muneco.css" type="text/css"> 
   

</head> 

<body> 

   <div id=container>
      <div id="nube"><img src="images/nube2.png" alt="" border="0"></div>
      <div id="situacion"><img src="images/tronco-muneco2.png" alt="" border="0"></div> 
      <div id="manoizquierda"><img src="images/mano-izquierda.png" alt="" border="0"></div>
      <div id="manoderecha"><img src="images/mano-derecha.png" alt="" border="0"></div>
      <div id="hoja" class="hoja">   
         <div class="hojas f1"><img src="images/hoja.png" alt="" border="0"></div> 
         <div class="hojas f2"><img src="images/hoja.png" alt="" border="0"></div> 
      </div> 
    </div>


   </body> 
</html>

Todo va dentro de nuestro DIV container y luego cada animación dentro de un DIV. Otra cosa ha destacar es que hay tantos DIV hojas f1 como hojas queremos que se caigan, en nuestro caso 2, pero podría haber más si quisiéramos.

Ahora sólo nos queda ver nuevamente nuestro ejemplo funcionando.

Fuente:enlace