Simplest Way to Create Cool CSS3 Animation Effects

Simplest Way to Create Cool CSS3 Animation Effects


Simplest Way to Create Cool CSS3 Animation Effects

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

 

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

1 comment

Alex
Sat, 14th September 2013
Did you see animation generator at http://cssanimate.com ? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement