CSS3 Animation are gaining tons of attention lately. Personally, I have started using it in some of my projects and I absolutely love how simple it is to create a smooth animation effect.
One of the major advantages of CSS3 is – they’re hardware accelerated. It’s smoother and faster if compared with javascript generated animation. This would be noticeable in mobile platform where processing power is still limited.
On the other hand, people still not willing to use it is because not all browsers support it at the moment. Using CSS3 animation might increase development time because you will have to come out with a plan to handle old browser, or make it degrade gracefully to javascript animation.
Here we have 11 CSS3 and Javascript animation libraries. Creating animation can be really simple with these libraries. You don’t have to make one, just choose from theirs large pool of predefined animation effects and add it to your websites. Combined with Javascript, it eliminates CSS3 animation weakness – fire on page load or a hover event. By using Javascript, CSS3 animation can be trigger at any time you want.
lieffect is an CSS3 animation generator that make loading of a group of images classy. It has over a dozen of animations created with CSS3 keyframes. It generates html, css and javascript codes either with css prefixes or none.
- Other: Toggle CSS3 prefixes
- Requirement: CSS3 & jQuery
This page has made a large pool of easings. Depend on your requirement, you can choose the one that’s best suited and it will generate all the require codes.
- Other: SCSS support
- Requirement: CSS3 & jQuery
It has over a dozen of animations as well. There are two types webkit native and custom animation.
- Requirement: CSS3
CSS3 like easings for jQuery animation.
- Requirement: CSS3 & jQuery
A powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. It uses animate.css which includes 60 beautiful animations.
- Requirement: CSS3 & jQuery
The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects.
- Requirement: CSS3 & jQuery
Super-smooth CSS transitions & transformations for jQuery
- Requirement: CSS3 & jQuery
Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.
- Requirement: CSS3 & jQuery
Different kind of animations. This one created by Lea Verou is a group of different animation preset such as changing box shadow, font size, border width etc in a very cool way.
- Requirement: CSS3 & jQuery
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
- Requirement: CSS3 & jQuery
Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible.
- Requirement: CSS3 & jQuery