Simplest Way to Create Cool CSS3 Animation Effects

Written by Kevin Liew on 13 Sep 2013
30,922 Views • Web Development

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.

 

liffect

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

 

Easing functions

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

 

Morf

It has over a dozen of animations as well. There are two types webkit native and custom animation.

  • Requirement: CSS3

 

Easie

CSS3 like easings for jQuery animation.

  • Requirement: CSS3 & jQuery

 

Animo.js

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

 

Animations

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects.

  • Requirement: CSS3 & jQuery

 

Transit

Super-smooth CSS transitions & transformations for jQuery

  • Requirement: CSS3 & jQuery

 

Move.js

Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.

  • Requirement: CSS3 & jQuery

 

Animatable

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

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 CSS3 Animation

Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible.

  • Requirement: CSS3 & jQuery

 

Join the discussion

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.

1 comment
Alex 11 years ago
Did you see animation generator at http://cssanimate.com ?
Reply