Published 03 May 2019

Top 15 CSS Animation Libraries You Should Check Out

Aryan
Updated 7 hours ago

CSSAnimation.io

CSSAnimation.io is a lightweight but feature rich animation library for css. It has large number of prebuilt basic animations with support for text animations as well. The library is easy to use and takes the pain out of css animations. You just need to include the library and use predefined animation classes on elements you want to animate. The Getting Strated Page has an extensive list of demonstration of all the basic animation features.

cssanimation-io-screenshot

Imagehover.css

It is a pure css image hover effect library that offers more than 40 creative image hover css effect classes to animate content over image. It is a lightweight library with an easy to follow documentation. The library also offers an extended set of hover effects for a small fee. imagehover-css-animation-website-screenshot

CSSShake

This is another highly creative css library for crazy shaking animations on html elements. The library contains more than a dozen shake effects which can easily be utilised by implementing the libraries' css classes. cssshake-animation-website-screenshot

Vivify

This is another simple css animation library that offers extensive set of css animation classes which makes animating elements a breeze. It's light weight library with unique set of animation effects. vivify-css-website-screenshot

Animate.css

This is one of the most popular css animation libraries with more than 59,000 stars on github. The library has wide cross-browser support and a very large user base. animate-css-website-screenshot

Repaintless

Repaintless is another powerful animation library with simple animations. Crafted for speed and smooth user experience. Take a look at there blog post to learn more about the library and what it has to offer. repaintless-css-website-screenshot

Popmotion.io/pure

This is a javascript based powerful and light-weight animation library for creative set of animations with support for multi-touch. Checkout there demo page for animations and there respective js code. popmotion-website-screenshot

Tuesday

Tuesday is a quirky CSS animation LIbrary. It has some unique set of animations well categorized for entrance and exit effects. The animations are easy to use and feels very subtle and native. It's also one of the fastest growing animations libraries. tuesday-css-animation-website-screenshot

Woah.css

If you are looking for some fun, flashy and wierd sets of animations Woah.css is way to go animation library. It has three categories for animations effects to choose from. The homepage features a wonderful demonstration of the animation effects. woah-css-animation-website-screenshot

Magic

Magic Animations is one of the very impressive animation libraries. It has its own very unique set of animations. You can look at the homepage for a beautiful demonstration of the included effects. magic-css-animation-website-screenshot

Hover.css

Hover.css is another powerful animation library sepcific for UI components like buttons or inputs or links. The library also offers feedback animations for buttons with icons. Overall, its powerful, flexible and easy to use. Take a look at its homepage to find more inspiration. hover-css-website-screenshot

WickedCSS

WickedCSS is another powerful animation library which features hard and flashy animmations. The examples page here features the basic animations the library offers which is very awesome.

wicked-css-banner

Scroll Out

Scrollout is another library that basically does not give you any readymade animations but it detects scroll changes and assigns attributes to the scrolling elements. The documenation at the homepage explains it better with instructions and best practices on how to use it effectively. scroll-out-animations

Micron.js

MicronJs introduces itself as a micro interaction library that animates an element using css and adds interactive behaviours using javascript. The homepage has well written usage instructions with demonstration. micro-js-animation-lib

Vivus

Vivus is one of the popular and a light-weight animation library specific for SVGs. It makes them appear as being drawn with feature controls like delay, sync, etc. Checkout the documentation for more details and svg animation exmple here. It makes it fun and easy to animation svgs. vivus-svg-library

Meet the author

Aryan K

writer

Just started blogging
Related Articles