animacion cons CSS3

Animación con CSS3
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.
Elcódigo de la siguiente práctica de momento funciona sólo con Chrome o Safari, adicionalmente una vez terminada la práctica debes colocar el código requerido para que funcione en navegadores como Mozilla,Opera y Explorer.
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 sevaya moviendo por el cielo de nuestro dibujo.

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


El fotograma nube 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, dura 3 segundos y va y viene a su posicióninicial.
Ahora vamos a animar el árbol para que veamos como caen sus hojas, para ello crea una hoja como la siguiente:


Y coloca el este código en el CSS:


Ahora 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 específicas para cada hoja.
Y por último nos queda la animación del muñeco, para ello realizamos las siguientes 3imágenes:

De las imágenes anteriores tenemos el cuerpo y 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 conseguirel movimiento adecuado puede ser un poco tardado. Su código CSS es el siguiente:

Con esto tenemos la mano derecha fija y la izquierda nos está saludando. A continuación colocamos un estilo...