This article was published 7 years ago, therefore the contents of this post may be out of date.

CSS animation makes it really easy to animate the web elements without using any JavaScript. As it is pure CSS, it is easy to master the CSS animation.

As CSS animation libraries make life further easier with the pre-made set of styles to animate elements on your website. In today’s post, we are going to look at the some CSS Animation Libraries that can help you create animations, as they give life to your website.

1. Repaintless

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.

2. DynCSS

DynCSS is an animation library that you might like to use in your website along with parallax effect.

3. CSS3 Storyline Animation

Demonstration of CSS3 Storyline Animation using jQuery Transit Library.

4. Animate

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.

5. Hover

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.

6. Animsition

A simple and easy jQuery plugin for CSS animated page transitions.

7. T-Scroll

A modern reveal-on-scroll library with useful options and animations.

8. CSS Animation

CSS animation library for developers, 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.

9. CSS Shake

Some CSS classes to move your DOM!

10. WickedCSS

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.

11. Obnoxious.css

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

12. Tuesday

Tuesday aims to fill out the gap inbetween, providing a more subtle set of effects that can seamlessly integrate into a wider variety of websites or web-app UI designs.Tuesday is a stand-alone library you can use without any dependencies, but you can use Tuesday alongside other animation libraries as well.

All Tuesday animation names start with td prefix so there is a low chance two libraries will collide unless there is another one that uses the same prefix and animation name.


12 Amazing CSS Animation Libraries