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
Â
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.