Collection of useful CSS3 animation tools ( library, plugin, cheat sheet, etc ) to help front-end developer create variety of animated effects to improve usability and to delight and surprise users.

Enliven ’em! Ad

This is a jQuery plugin which lets you animate any vector graphic presented as SVG files in many different ways when your vector illustrations become visible in a user’s browser viewport. Also you can allow an animation to be repeated when user click or tap your graphic.

AniCollection

It is a collection of awesome animations from many libraries and many people. To give you an easy way to find, use and share it.

animate.css

It 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.

Magic

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

animo.js

A powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic.

CSS animation event

The CSS3 animation and transition modules both provide some rather useful DOM events which can be used to track the current state of an animation or transition – extremely useful for chaining future application logic as they progress and complete.

CSS3 Animation Cheat Sheet

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.

Stylie

Stylie is a fun tool for easily creating CSS3 animations. You can configure your animation graphically, tweak it, grab the generated CSS and go!

Ceaser

Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.

TextFX2 – CSS3 Text Animations

TextFX2 is a CSS3 Transition + CSS3 3D Transform plugin, and as stated above, all animations will revert to a simple fade for IE8, IE9 and Opera.

Sencha

Sencha Animator is a desktop app to create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices.

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.

liffect

A nice visual effect for lists: liffect (with CSS3 and Keyframes animation).

CSS Animation

It’s not easy to generate keyframes for CSS3 Animations. This new CSS Path Animation tool can help you convert SVG paths into CSS keyframes.

Adobe Edge Animate

Adobe Edge Animate is a powerful, intuitive tool for creating stunning animated and interactive content using HTML5, CSS3 and JavaScript. Edge Animate is intuitive and has powerful features that can save time and headaches.

Tumult Hype

Tumult Hype is a decent starting point for Mac users looking to get started with HTML5-based web animation. It carries with it the ability to create animations to any elements in the scene simply by dragging them and dropping them onto a timeline with automatic keyframes.