Animations using CSS3
I’m not a big fan of big animations on websites. I like to get in, get the thing I was looking for and get out. I hate it if I have to look at your awesome loading animation if the thing I just want is to look at your contacts page.
But, once again, we’re (lazy) developers, so we don’t want to make our animations from scratch.
Well Justin Aguilar got you covered, he compiled CSS3 Animation Cheat Sheet that is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the pre-made CSS classes to the elements you want animated.
The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that’s IE 10). Using CSS3 @keyframes, you don’t have to worry about positioning the element to accommodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn’t trigger. Below are instructions on how to get started.
However, there’s another project that you might want to take a look when it comes to animations done with CSS3.
It’s called animo.js