Workshop #2 – Animando una escena con CSS3

En este sencillo tutorial seguiremos trabajando con CSS3 y en específico con las nuevas técnicas para animar. En esta ocasión vamos a animar una escena de caterrera, vamos a animar las ruedas de un automóvil para dar la sensación de movimiento, también el fondo, lo único estático de esta escena serán la carrocería del auto y el sol. Vamos a hacerla. Esto es lo que vamos a conseguir: #1 – El html.

Hacemos los diferentes div de acuerdo a la ubicación en la escena, en contenedor general será el fondo luego el sol y el carro están en el mismo nivel en la escena y las llantas están dentro del div carro, que es su div padre. Algo mas o menos asi: ubicacion-html #2 – El CSS

fondo-animacion-css3 Aquí tenemos el fondo y también vemos como se va a animar, va a hacer una animación o recorrido que va desde un extremo al otro, especificamos los prefijos de los diferentes navegadores (-moz-,-webkit-) que aceptan la animación y colocamos el genérico o la sintaxis original, esta animación va a durar 2 segundos, va a hacer lineal y se reproducirá infinitamente. El sol.

El sol lo colocamos en la parte superior de la escena con una posición absoluta, especificamos su altura y anchura. El Carro.

El siguiente es el carro, le damos la altura y anchura correspondiente a la imagen del carro, lo ubicamos y especificamos su ubicación por medio del top y left. Las Llantas.

El código para las llantas es el mismo, solo cambiamos el nombre de ella a llanta1 y llanta2, el nombre de la animación y la posición de cada una, las movemos a sus respectivos lugares por medio de top y left. La animación es de hacer rotar la rueda y lo hemos dándole la propiedad transform: rótate en su punto de partida será 0 y su final es de 360 grados, con esto la hacemos girar, la animación de la rueda dura 0.7 segundo, será linear y infinita esta animación. Especificamos cada animación a cada navegador por medio de los prefijos de cada uno de ellos y colocamos la declaración original. animacion-llantas-css3 y listo!!, asi obtenemos una escena animada con CSS3, podemos agregar mas cosas a la escena, pero la idea es hacer algo basico para seguir practicando las animciones con CSS3.

Ver Workshop#1 – Animando una escena con CSS3

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

4 Respuestas

  1. Roy Vargas dice:

    Me gustaria mucho, como lo puedo hacer…
    Gracias

  2. alberto dice:

    excelente animacion, ahora como hago para que la rueda se desplace y a la vez gire?

    • Johanso dice:

      Hola Alberto, ya para hacer un desplazamiento toca mover las ruedas, cambiar la posición y aplicar una transición, después que la animación vaya de 0 a 100% o de from a to, no va a parar. Saludos

  3. adersson dice:

    muy bueno, gracias tutosytips..