() translation by (you can also view the original English article)
Nuestros navegadores en dispositivos móviles continúan siendo más poderosos y mejores mostrándonos sorprendentes y hermosas animaciones. Cuando se combinan con el poder de maquetación de CSS, es posible crear un trabajo fenomenal sin utilizar ninguna imagen. El resultado es escalable, de carga rápida y muy impresionante para observar.
Veamos qué fabulosas cosas las personas están haciendo y animando con solo HTML y CSS.
1. Ciclista con Solo CSS
¡Pasa mucho aquí que es difícil de creer que simplemente es HTML y CSS! Animaciones que rotan y movimientos en capas se combinan para hacer parecer que éste ciclista y su bicicleta fueran de goma. ¡También buen uso de BEM en la nomenclatura de la clase!
2. Girando el Anillo de Saturno con Solo CSS
Combinar muchas partes en movimiento puede hacer que un simple conjunto de elementos de HTML parezca una animación más compleja, y es algo que éste demo hace bien. Observa cómo interactúan los dos planetas, mientras que las "partículas" del anillo están lo suficientemente diseminadas para parecer que fueron colocadas aleatoriamente.
3. Animación de Capas de Color CSS
Capas de color podrían no significar mucho, pero cuando se mueven pueden transmitir cargas de carácter. En éste ejemplo, un conjunto de etiquetas de párrafo HTML semitransparente es animado, y el resultante conjunto de animación es hipnótico.
4. Cargador de Helado
No siempre necesitamos JPGs o PNGs para crear bellas imágenes, y éste es otro ejemplo. Un contenedor div y cuatro más es todo lo que se requiere para crear está admirable imagen de cargador con temática de helado. El código resultante es mucho más pequeño de lo que sería con un GIF animado.
5. Pichones con Solo CSS
Cuando combinas el uso artístico de elementos HTML con alguna animación llena de personajes, éste es el resultado. Una sutil animación pero llena de diversión. Todo nuestro respeto a Julia Muzafarova para lo que ha sido un laborioso trabajo en la creación de todos esos conjuntos de keyframes. ¡Más que unos cuantos cafés también!
6. Gato Dormilón
Juntando muchos elementos HTML con un conjunto de animaciones sutiles y divertidas, éste gato dormilón tiene mucho carácter. Éste ejemplo usa Sass, y variables para controlar la animación. ¡Trata de cambiar algo para ver que ocurre!
7. Oso Negro
Animaciones sutiles pueden lograrse cuando se usa HTML y CSS, especialmente cuando seguimos algunos principios básicos. Ésta animación mantiene el número de elementos a un mínimo, y gran uso de transformaciones.
8. Esponja CSS
Animaciones rápidas pueden añadir mucho carácter cuando se combinan. En éste demo, ve cómo las burbujas y el agua salpicada forman una coreografía para crear una animación con una curiosa esponja, todo sin imágenes.
9. Verificador de Coreo con Solo CSS
Una serie de animaciones con keyframes pueden contar una historia o ayudar a las personas a entender lo que están viendo. Aquí vemos un sobre que se abre y presenta una corta.
10. Precargador de Auto
¡Un poco de movimiento sutil puede crear grandes sentimientos de intensidad! Éste cargador tiene un auto que parece estar corriendo, todo creado con unos cuantos elementos y animaciones CSS. Sin imágenes ésto cargaría rápido.
¡Inspírate!
Gracias como siempre a CodePen y a las mentes creativas detrás de éstos demos; ciertamente nos han proporcionado mucha inspiración en éstos ejemplos de animación. ¡Verifica los siguientes posts para más de lo mismo, y aprender cómo crear tus propias animaciones CSS!
