Make Cool Effect with CSS3 Animation Libraries

Make Cool Effect with CSS3 Animation Libraries

Make Cool Effect with CSS3 Animation Libraries


When it comes to animation, flash is being replaced by Javascript and CSS3. With CSS2, we can't really do much with it other than changing the size, animating from x to y using Javascript. However, with CSS3 which supports different transition, 3D transforms, it opens out so much possibilities. With the help of Javascript, it can go even further.

Here in this post, I have 5 CSS animation library built with CSS3 and intended to let you extend them and use it in your own project.  Though not all the browsers are supporting all these features yet, but it's close enough and make sure it degrades gracefully for older browsers.

If you are looking for Javascript solutions, you can read my previous post on CSS and Javascript animation plugins, frameworks and libraries.

  • AnimatableAnimatableA collection of CSS3 Animation created by Lea Verou, a famous front-end developer from Greece. There are total 39 of different animation effects and it's available for free.
  • Animate.cssAnimate.cssSimilar to Lea Verou's but animate.css is built to make sure it can be easily reusable in your project. Also with an extensive collection of cool animation, you can use it to create your scripts.
  • LiffectLiffectAnimation effect for list. In web design, we are often to have a list of items, such as image gallery. Liffect will spice thing up for you. You can generate different kind of animation easily with this.
  • EasingsEasingsEasing function is something different from the reset. It's a generator to create different easing transition. You will get a CSS version too if it's possible to make it with CSS, otherwise, you will get a javascript version.
  • MorfMorfSomething like Easings function, but this all are made with CSS.

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


Simon Jennings
Fri, 9th November 2012
Useful list but where do I download the Animatable code? 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!