20 Hand-Picked Free CSS Animation Libraries

CSS Animation LibrariesFrontend web design has been through a revolution in the last decade. In 2007, most of us were still designing static magazine layouts – in 2017 we’re building ‘digital machines’ with thousands of resizing, coordinated, moving parts.

Quite simply, great UI designers need to be great animators too – with a solid working understanding of the web animation techniques.

This is the latest update to our guide to helping you choose the right animation library for each task. We’re going to run-through 20 free, well-coded CSS animation libraries best-suited to UI design work – their strengths and weaknesses and when to choose each one.

Animate.css

Demo Image: Animate CSS

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


Hover.css

Demo Image: 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.


Effeckt.css

Demo Image: Effeckt CSS

A performant transitions and animations library.


Animate Plus

Demo Image: 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.


Bounce.js

Demo Image: 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.


Magic CSS

Demo Image: Magic CSS

CSS3 animations with special effects.


CSShake

Demo Image: CSShake

Some CSS classes to move your DOM!


Repaintless.css

Demo Image: 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.


Tuesday.css

Demo Image: Tuesday.css

It’s a quirky CSS animation library.


Obnoxious.css

Demo Image: Obnoxious.css

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


VHS.css

Demo Image: VHS CSS

Post-Future CSS animations.


ReboundGen

Demo Image: ReboundGen

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


Motion.css

Demo Image: 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.


Dynamic.css

Demo Image: 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.


CSS Animation

Demo Image: 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.


WickedCSS

Demo Image: 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.


Buttons

buttons - 18 CSS Effect Libraries for Creating Beautiful Animations

Buttons is a CSS library for creating highly customizable, flexible and modern web buttons. It is built with Sass + Compass and has support for square, rounded or circular buttons that can be flat or not and having custom effects (like glow). The sizes, colors, effects and fonts used can all be changed with the help of variables and it can be extended easily.


Kite

Kite

Kite is a flexible layout helper CSS library. Kite uses `inline-block`, not the latest CSS Syntax. It’s practical, simple to understand and easy to use. Kite behaves like flexbox: justify-content, etc. You could easily create complex modules.


Spin Kit

spinkit - one of 18 CSS Effect Libraries for Creating Beautiful Animations

Spin kit is a collection of awesome loading spinners animated with CSS. Spinkit uses CSS animations for creating attractive and easily customizable animations. The goal is not to offer a solution that works in every browser—if you’re supporting browsers that haven’t implemented the CSS animation property (e.g. IE9 and below), you’ll want to detect support for the animation property, and implement a fallback.


Magic CSS3 Animation

Magic Animations CSS3 - 18 CSS Effect Libraries for Creating Beautiful Animations
Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the mynified version: magic.min.css.

You may also like...

Read previous post:
freelance jobs
10 Next Most Promising Jobs in Digital Marketing

Time to polish that résumé, marketers. The business is shifting amid rapid change, and jobs that were considered experimental a...

Close