We’ve previously published the creative text effects you can make with CSS, and many other cool things you didn’t think were possibly to make with CSS. This compilation however focuses on the many things you can animate with CSS, and many of these creations will make you raise an eyebrow or two.
From loading animations to toggles, and modal windows to shaking elements, this pile of 30 unusual and creative uses of CSS animation can open your mind to more ways you can play with CSS animations that you’ve probably never thought of before.
Seven animated dots shifting left and right to signifify a loading action.
Cute animated effects for when groceries are added to the shopping cart. Scroll down for more.
Built with pure CSS, no JS or anything else.
At least with this error page, a developer is working on it. Even if it is a 404.
We have landed on Mars! Made with CSS.
Now, you can toggle day and night with CSS. Genius idea!
Google Now third party apps, animated.
Does a rooster move like that? You bet it does, complete with the jiggy neck. Great CSS3 practice.
A simple idea put to action; watch the menu button materialize when you scroll down.
An awesome CSS rhythmic loading animation. Hypnotic, isn’t it?
Click to submit, and the button animates the loading process until submission is complete!
Drag the white bar to the right to see an elastic sidebar effect.
Do what the button says: hover for awesomeness.
Click for the Gooey effect. You’ll get it once you see it, and you will click on it a few times more. Amirite?
Click on any side of the Delete button and the button will flip according to where you click.
A truly delicious hamburger menu. Click the hamburger for effects
See motorbike go.
A hamburger menu gets transformed into lightsabers in battle (a cross).
A little animated pen animated writes atop the forom you are filling in.
An awesome optical illusion, yes, done with CSS3.
Here’s a reminder to take your daily dose of coffee. Like you need one.
Can’t reach the page you want beacuse of a dropped connection? Here’s the dinosaur you always see when that happens, only this time it is running from a meteorite!
Hover over each effect to watch the little guy shake.
If you know physics, you certainly know Newton’s cradle, but probably not like this.
Click to see the nice and smooth modal window animation.
This robot just keeps walking, and walking, and walking, around the Y axis.