Spanish (Español) translation by Jorge Montoya (you can also view the original English article)
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?
