16 CSS Animation Libraries

July 20, 2017 | by Vladimir Stepura

Collection of hand-picked free CSS animation libraries.

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.

FreeFrontend © 2016 - 2017

Back to top