CodePen rápidamente se está convirtiendo en el lugar al cual acudir para mostrar lo que podemos hacer con nuestras creaciones web. ¡Aquí hay una lista de unos magníficos trabajos que las personas han creado con animaciones CSS recientemente!

1. Reloj Mickey en Javascipt

Appe watch como reloj de Mickey por Jay Salvat (@jaysalvat).

Éste es un ejemplo encantador de combinar transiciones en CSS, gráficos SVG y Javascript para posicionar las manos en una simpática carátula de reloj de Mickey Mouse.

2. CSS Submarine

Submarino con CSS por Alberto Jerez (@ajerez).

Precioso uso del contenedor en forma de puerta circular que le da un enorme encanto a éste submarino  animado con CSS.

3. ASCII AT-AT

AT-AT por Tim Pietrusky (@Tim Pietrusky).

Transnorte de Personal inspirado en la Guerra de las Galaxias, dibujado usando texto con colores cambiantes en CSS.  Un efecto funky.

4. Cargador SVG/CSS

Cargador SVG/CSS por Bidji (@Bidji).

Éste cargador utiliza los colores cambiantes para dar la impresión de rotar.

5. Cabina de Policía en 3D con CSS 

Cabina de Policía en 3D  con CSS por Gerwin van Royen (@Gerwinnz).

CSS puede usarse para crear sorprendentes efectos en 3D. Aquí está una cabina de policía en 3D.

6. Pájaro Dormilón

Pájaro Dormilón por Peter Klein (@pmk).

Estilo artístico sencillo y sólo la cantidad correcta de animación da ilusión de vida a éste pájaro dormilón.

7. Borde animado con puro CSS

Animación del borde con puro CSS sin SVG por Rplus (@plus).

Simple pero muy efectivo uso de bordes en CSS para crear una animación con estilo de carga.

8. Star Wars: El Despertar de la Fuerza

Star Wars: El Despertar de la Fuerza en CSS por Donovan Hutchinson (@donovanh)

El título de la próxima película de Star Wars creado utilizando CSS, HTML y un poco de JavaScript.

9. Sintetizador 3D

Sintetizador 3D con CSS puro (ratón abajo para rotación) por Nikolay talanov (@suez)

Pruebe las teclas y rotar este sintetizador 3D creado usando CSS. Sorprendente trabajo:

10. Sistema Solar en Cascada

Sistema Solar en Cascada por Tady Walsh (@tadywankenobi)

Un modelo de nuestro sistema solar, completo con velocidad de rotación escalada, lunas y detalles en cada uno de los planetas más grandes. ¡El sol es incluso una una toma en vivo del de verdad! 

11. Sistema Solar en 3D

Sistema Solar CSS Completo en 3D por Wayne Dunkley (@waynedunkley)

Otro sistema solar, pero esta vez en 3D. Hermoso uso del sombreado.

12. Cámara en Diseño Plano

Cámara de diseño plano con animación CSS por Damien Pereira Morberto (@damienpm).

Presione el disparador en esta cámara de diseño plano para verla crear una fotografía utilizando animación CSS.

13. Transición Día y Noche

Simulación Día Noche por Szymon Stypa (@Catagen)

Presione el botón para ver como el día se transforma en noche.

14. Secuencia animada con CSS

Duende animado con CSS por Avaz Bokiev (@samarkandiy)

Una demostración de cómo una secuencia de imágenes (sprite) puede ser utilizada para crear animación stop-motion completa con movimiento hacia adelante y hacia atrás.

15. Dodecaedro

Dodecaedro por wontem (@wontem)

Un sutil, precioso dodecaedro creado y animado enteramente con CSS.

Conclusión

No hace mucho nos hubiéramos apoyado en herramientas Flash o JavaScript para cualquier animación dentro del navegador.  Los navegadores modernos han traído un mejor soporte para CSS con 3D acelerado por hardware y animación. 

Gracias a sitios como CodePen podemos compartir y aprender más fácilmente que antes.   ¿Cuáles son algunas de las demostraciones de animación que usted ha visto recientemente?