Our mobile browsers continue to get more powerful and better at showing us amazing, beautiful animations. When combined with the layout power of CSS, it’s possible to create some gorgeous work without using any images at all. The result is scalable, quick-loading, and well, impressive to see.
Let’s take a look at what amazing things people are making and animating with only HTML and CSS.
1. Pure CSS Biker
There's so much going on here it's hard to believe it's simply HTML and CSS! Rotating animations and multiple, layered movements combine to make it look like this cyclist and his bike are made of jelly. Nice use of BEM in the class naming too!
2. Pure CSS Saturn Hula Hooping
Combining lots of moving parts can make a simple set of HTML elements seem like a more complex animation, and that’s something this demo does well. See how the two planets interact, while the looping “particles” are just scattered enough to seem random.
3. Color Layers CSS Animation
Simple colored layers might not seem much, but when they move they can convey loads of character. In this example, a set of semi-transparent HTML paragraph tags are animated, and the resulting stacked animation is hypnotic.
4. Ice-Cream Loader
We don’t always need JPGs or PNGs to make beautiful images, and this is another example. One container div and four others is all it takes to make this deliciously watchable little ice-cream-themed loader image. The resulting code is much smaller than an animated GIF would be.
5. Pure CSS Pigeons
When you combine artistic use of HTML elements with some character-filled animation, this is the result. An amazingly smooth yet busy animation full of fun. Massive respect to Julia Muzafarova for what must have been incredibly fiddly work building all those sets of keyframes. More than a few coffees too!
6. Sleeping Cat
Bringing together lots of simple HTML elements with a bunch of subtle, fun animations, this sleepy cat has a lot of character. This example uses Sass, and variables to control the animation. Try changing some to see what happens!
7. Black Bear
Smooth animations can be achieved when using HTML and CSS, especially when we follow some basic principles. This animation keeps the number of elements to a minimum, and great use of transforms.
8. CSS Sponge
Quick animations can add a lot of character when combined. In this demo, see how bubbles and splashes are choreographed together to create cute animation with a happy sponge, all without any images.
9. Pure CSS Checkbox Mail
A series of keyframe animations can tell a story or help people understand what they’re looking at. Here we see open an envelope and get a letter.
10. Care Preloader
A bit of subtle movement can create great feelings of intensity! This loader has a car looking like it’s speeding along, all created with a few elements and CSS animations. With no images this would load fast.
Get Inspired!
Thanks as always to CodePen and the creative minds behind these demos; they’ve certainly provided us with plenty of inspiration in these animation examples. Check out the following posts for more of the same, and to learn how to create your own CSS animations!
CSS Animation15 Inspiring Examples of CSS Animation on CodePen
AnimationAdding Appeal to Your Animations on the Web
AnimationPractical Web Animation
CSSA Visual Guide to CSS Animation
No comments:
Post a Comment