A few months ago I wrote a post showcasing 12 Awesome Pure CSS Designs and I had such a positive response, I decided to do another post. In fact, I even received messages, comments and emails from some of the designers who were featured. Other designers shared their work with me as well. After being introduced to even more amazing work after that post, the follow-up was easy. This time around, I’m focusing on the animation aspects of css. Some of these designs are also illustrated with Pure CSS. All showcase a myriad of things you can do with css.
Again, I have to say I am so amazed by the talent showcased here. Hopefully you will enjoy their work as much as I do.
The images below are simply screenshots, and clicking on the links provided will take you to the actual animated versions. Don’t forget to come back here and leave a comment letting me know your favorite. Also, if you are a css designer or animator and I haven’t showcased you yet, please leave a comment below and tell me about your work.
Though many browsers support the technologies, I used Firefox to preview all of the animation and games here. Personally, I would recommend Firefox or Chrome for an optimal viewing experience.
1. Iron Man
What better way to start this list? Superheros rock and they are even better in pure css! Vinicius Dacal Lopes uses his css skills to design and lightly animate Iron Man. Notice the glowing eyes? Brilliant effect.
2. Piano Keyboard
This fantastic piano app by Luiz Felipe Tartarotti Fialho uses some Javascript to get everything working to compliment the css design resulting in an interactive masterpiece! I was really impressed with Luiz’ work and I wanted to make sure that it was included. My son plays piano and really liked this little gem. See if you can tap out a tune!
3. Pacman
Growing up with Pacman, I couldn’t pass up this little animation loop with Pacman chasing Blinky. (though shouldn’t Blinky be chasing Pacman?)
4. Connect 4
How about a break? Want to play a little CSS Connect 4? Stu Nicholls created this game without any Javascript/Jquery. He uses css to take care of the logic features of the game. He explains that the logic is covered by “just a handful of lines in the stylesheet and very little code”.
5. Spiderman
Anthony Calzadilla doesn’t disappoint with his mind-boggling css spiderman video. I was just blown away by all of the work that went into making this original animated wonder. Once you view the video, you can read Anthony’s article about the steps he took to create it.
6. Battlefield CSS3
It is truly unbelievable that this was created several years ago! I just had to include this. Nikhil Suresh was a true CSS3 animating pioneer with his wonderful movie.
7. Starwars Scrolling Text
What list would be complete without something showcasing Star Wars? Is it possible to have a design list without it? Thanks to Craig Buckler, we now have the epic Star Wars Scrolling Text feature. Want to know how it’s done? Craig provides the code too: Star Wars 3D Scrolling Text in CSS3. Learn how it’s done, and then you can use it with your own content.
8. Book Flip
If you sell books or have an ebook, this might be a more practical css animation you can use with your own content. I just love the simplicity of the book pages flipping open on hover. It’s a wonderfully subtle feature and there’s one for hardbacks and one for paperbacks. Author Marco Barria offers a step-by-step tutorial for creating this amazing pure css masterpiece.
9. Newton’s Cradle
I love science and math so when I saw this Newton’s Cradle made with css, I had to include it in the list. It was difficult for me to stop watching it and get to work on the list – mesmerizing!
10. Easter Egg
This cute little Easter Egg animation by Thingography.com was the perfect piece to end this list. If you plan to celebrate Easter this weekend or just like colorful, festive things – this is for you. The colorful Easter egg patterns raining out of the sky wonderfully showcases both pure css design elements and animation effects.
Have something to say? I’d love to hear from you! Please leave a comment below and let me know about your css journey.
Sorry, the comment form is closed at this time.