20 Hand-Picked Free CSS Animation Libraries
Frontend 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.
A cross-browser library of CSS animations. As easy to use as an easy thing.
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.
A performant transitions and animations library.
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.
CSS3 animations with special effects.
Some CSS classes to move your DOM!
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.
It’s a quirky CSS animation library.
Animations for the strong of heart, and weak of mind.
Post-Future CSS animations.
Generates keyframe animations using Rebound.js by Facebook – a spring system simulator. Similar to Animate.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 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 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.
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 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 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 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 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.