Post thumbnail: 25 CSS Animation Libraries

25 CSS Animation Libraries

Collection of hand-picked free CSS animation libraries. Update of July 2017 collection. 5 new items.

Demo image: Woah.css

Woah.css

Joe Rezendes |

github page demo page

CSS animation library for eccentric web developers.

Demo image: Micron.JS

Micron.JS

Webkul |

github page demo page

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

Demo image: Hexa - Awesome CSS Animation Library

Hexa - Awesome CSS Animation Library

aouane mohamed amine |

github page demo page

Give life to your text, photos and anything with just put a magical class.

Demo image: Vivify - CSS Animation Library

Vivify - CSS Animation Library

Martin Kníže |

github page demo page

Vivify is free CSS animation library.

Demo image: tachyons-animate

tachyons-animate

Andrew Nater |

github page demo page

Single purpose classes to help you orchestrate CSS animations.

Demo image: Infinite - Useful CSS Animations

Infinite - Useful CSS Animations

Tilo |

github page demo page

A small set of useful infinite CSS animations that you can drop into your project.

Demo image: Motion UI

Motion UI

zurb |

github page demo page

A Sass library for creating flexible CSS transitions and animations.

Demo image: DynCSS

DynCSS

Vittorio Zaccaria |

github page demo page

Simple, dynamic CSS rules to give life to your sites.

Demo image: All Animation

All Animation

all-animation |

github page demo page

All animation.css is a set of fun animations to make your project sexier. They are cross-browser animations but that will emphasize your pages as sliders, 3D effects's.

Demo Image: Animate CSS
Demo Image: Animate.css

Animate.css

A cross-browser library of CSS animations. As easy to use as an easy thing.

Demo Image: Hover CSS
Demo Image: Hover.css

Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Demo Image: Effeckt CSS
Demo Image: Effeckt.css

Effeckt.css

A performant transitions and animations library.

Demo Image: Animate Plus
Demo Image: Animate Plus

Animate Plus

Animate Plus is a CSS and SVG animation library for modern browsers. Animate Plus is performant and lightweight (2.8KB gzipped), making it particularly well-suited for mobile.

Demo Image: Bounce.js
Demo Image: Bounce.js

Bounce.js

Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generate static keyframes that can be used without any extra JavaScript, but if you’d like your application to generate these on the fly, you can use the Bounce.js library.

Demo Image: Magic CSS
Demo Image: Magic CSS

Magic CSS

CSS3 animations with special effects.

Demo Image: CSShake
Demo Image: CSShake

CSShake

Some CSS classes to move your DOM!

Demo Image: Repaintless.css
Demo Image: Repaintless.css

Repaintless.css

Repaintless.css in a lightweight animation library that consists only of animations that don’t cause reflows and repaints of a website when used correctly.

Demo Image: Tuesday.css
Demo Image: Tuesday.css

Tuesday.css

It’s a quirky CSS animation library.

Demo Image: Obnoxious.css
Demo Image: Obnoxious.css

Obnoxious.css

Animations for the strong of heart, and weak of mind.

Demo Image: VHS CSS
Demo Image: VHS.css

VHS.css

Post-Future CSS animations.

Demo Image: ReboundGen
Demo Image: ReboundGen

ReboundGen

Generates keyframe animations using Rebound.js by Facebook - a spring system simulator. Similar to Animate.css

Demo Image: Motion.css
Demo Image: Motion.css

Motion.css

Motion CSS is a library of animation for your web projects. It works very simply. All you need to do is connect the css file and use a specific class to an element that should be animated.

Demo Image: Dynamic.css
Demo Image: Dynamic.css

Dynamic.css

Dynamic.css is a bunch of awesome, cross-browser CSS animations to use in any project. It’s perfect to animate incoming and leaving web page elements, but it also could be useful for sliders, :hover handlers and all kind of general use.

Demo Image: CSS Animation
Demo Image: CSS Animation

CSS Animation

CSS animation library for developers and ninjas. Unlike all the other complicated vendors, cssanimation.css is only 84kb with 300 animations, 165kb in the minified version with all prefix and only 10kb when compressed.

Demo Image: wickedCSS
Demo Image: WickedCSS

WickedCSS

A library for CSS3 animations. The animations include regular CSS3 animations to be used in all settings. Additionally, the library includes a number of wicked animations, which aren’t applicable in all situations. They can be fun to play with.

Back to top