Animate.css – CSS3 Library To Create Animation Easily
CSS has improved with many features which make web development much more interesting and challenging. One of these…Read more
These new effects are much more subtle in nature so they really blend into a page nicely. Here’s a small list of the effects you can pick from:
Fade & expand
Fade & shrink
Stamp down & bounce
Drop in from left/right
If you go through this list on the demo page you’ll notice that all the effects have one thing in common: physics.
They all feel very realistic to the basics of physics, and they seem to abide by the laws of gravity. None of these animations are over-the-top or extraneous. They’re subtle yet noticeable and more importantly, they’re believable.
I think Tuesday is one of the best modern CSS animation libraries because it presents a realistic view of web animation.
We shouldn’t be designing crazy interface effects that stand out like a sore thumb. Subtlety is always the name of the game because it creates a sense of interactivity from any user input whether it’s a click or a scroll.
The trouble has always been writing these animations from scratch and getting them to look just right. But now with Tuesday your worries can fly right out the door.
Just download a copy from GitHub and add the .css file to your page. You can actually use the CDN version straight from GitHub if you don’t want to download anything locally.
Once this is added to your web page, just append the .animate class along with any of the proprietary classes listed in the GitHub repo. Your code might look something like this:
There’s so much you can do with Tuesday, and it’s really the new Animate.css for pragmatic UI animations.
Take a peek at the demo page to see it live in action, and you can learn more by reading through their “in the making” post which talks about how the Shakr team created Tuesday.