Workshop #1 – Animando una escena con CSS3

En este tutorial vamos a practicar las técnicas de transformacion y animación utilizando solo CSS3, vamos a animar varios objetos al mismo tiempo para crear una escena muy sencilla, pero que nos ayudara a entender mejor el concepto y a volvernos más prácticos.

Esto es lo que vamos a hacer, algo básico pero nos sirve para practicar:

primero aclaramos que solo se vera bien en navegadores basados en webkti y moz:

uso-en-navegadores

Así que, comencemos.

1 – El html

Estos son los elementos que vamos a incluir en la escena, cada elemento a animar será un div y las imágenes las incluiremos con css. Vamos a tener un div background que contendrá toda la escena, dentro un faro, un barco, una luz que va hacer animada independientemente, una nube y dos pájaros.

2 – Los Css

Empecemos por los fondos.

En background posicionamos la escena, le damos altura y anchura, le damos overflow:hidden para que solo se vea lo que pasa dentro del y le damos a mostrar el fondo de la escena que es el mar con el cielo, con las estrella y la luna.

background

sigamos con el Faro.

Con el código anterior lo que hacemos es posicionar en su sitio y mostrar el faro, le damos su respectiva altura y anchura y le damos en z-index una posición superior al fondo.

background-faro

Sigamos con la Luz y su animacion.

El siguiente paso es ocuparnos de la animación de la luz, la animación tiene una duración de 100% y en cada punto de tiempo o % definimos una acción, la animación se da sobre el eje x del cono de luz y se escala al 100% por eso da la opción de reflejo, al escalar vamos a dar la impresión de giro, luego del 50% al 95% de la animación esta cambia su z-index por que ya el cono de luz se encuentra detrás del faro y cambia un poco de opacidad para que parezca más natural el movimiento y con ease-in-out que es un tipo de animación diferente a la linear damos este tipo de animación como de desaceleración que se adecua al caso y como es infinite se vuelve a repetir siempre.

Y por ultimo repetimos siempre para @-moz-keyframes luz y @-wekit-keyframes luz , para que se vea bien en los navegadores modernos.

La nube.

La animación de la nube es muy sencilla, primero la posicionamos con su altura y anchura, la mostramos con su background y especificamos las características de la animación, el nombre de la animación, tiempo de la animación que en este caso será 500 segundos y su animación será linear que es una animación pareja.

Luego en los keyframes especificamos los puntos de partida y llegada de la animación, parte en left 100 y termina fuera del escenario y no se vuelve a repetir por que no es infinite.

background-nube

Primer Pajaro.

La animación de el pájaro o gaviota que debe de ser, es un gif, ella mueve las alas para aparentar su vuelo, eso lo obtenemos por medio de un gif animado que podemos hacer con fireworks o photoshop o cualquier programas que genere animaciones gif. Luego posicionamos la clase pájaro altura, anchura, lo mostramos y damos las características de la animación que en este caso es infinite es decir, se va a animar siempre en forma de loop, luego con los @keyframes damos los puntos de la animación en 0% está fuera del escenario y con escalado a un 0.6, luego en el 100% de la animación esta a 680px de su punto de partida es decir ya a recorrido todo el escenario y ha cambiado de escala a un 0.9 y recordemos que es un gif, por eso sus alas se mueven.

Segundo Pajaro.

Bueno, este es el mismo pájaro de el pajaro1 solo que cambiamos la duración de la animación este es de 20 segundo es decir va a volar mucho mas rápido que el anterior, su punto de partida o frame 0% también cambia un poco y su llegada o 100% y también cambia su escalado en su salida y llegada. Ambos pajaros tienen la funcion infinite que quiere decir que se reproduciran infinitamente.

background-pajaros

Por ultimo el Barco.

Con el barco hacemos el mismo proceso de posicionamiento y declaración de las características de la animación, el nombre de la animación es barco, dura 140 segundo y el tipo de animación es linear es decir sin variación.

Con los @keyframes declaramos los puntos de partida y llegada 0% y 100% con 650px de posición de llegada que lo que hace es atravesar la escena y no se va a repetir la animación.

background-barco

Ok, eso es todo en cuanto este taller de animación de CSS3, podemos seguir añadiendo elementos animados para hacer más completa la escena y seguir practicando la propiedad de animación de CSS3, nos va a servir mucho. Nos vemos en otro tutosytips.

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

1 Respuesta

  1. Hello There. I found your blog using msn. This is an extremely well written article. I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll definitely comeback.