Welcome to our curated collection of CSS animation libraries! In this comprehensive compilation, we have gathered a diverse range of libraries that will help you bring your web designs to life with stunning animations. Whether you are a beginner looking to add subtle transitions or an experienced developer seeking complex and dynamic animations, this collection has something for everyone. These libraries offer a wide variety of pre-built animation effects, easing functions, and customization options, making it easier than ever to create visually captivating and engaging user experiences.

Update of November 2022 collection: We are excited to announce that we have added 1 new item to our collection, bringing you even more options to explore and experiment with. Stay up to date with the latest trends and techniques in CSS animation by incorporating this new addition into your projects.

From simple hover effects to intricate page transitions, these libraries will empower you to unleash your creativity and take your web designs to the next level. Join us on this journey and explore the world of CSS animations with our handpicked collection of libraries.

Let's make your websites come alive!

Related Articles

  1. CSS Animation Examples
Demo image: AnimatiSS

Author

  • @xsgames_

Made with

  • HTML / CSS

About a code

AnimatiSS

AnimatiSS offers a simple and user-friendly interface for creating CSS animations. You can preview animations right on the site before using them in your projects. After selecting and customizing an animation, you can get the corresponding CSS code with a single click. AnimatiSS offers a comprehensive collection of CSS animations, including scaling, rotation, swinging, sliding, shadow, tracking in/out, blur, and many more.

Demo image: Motionia

Author

  • Abhi

About a code

Motionia

MotioniaJS is a lightweight and easy-to-use JavaScript library for creating animations. It allows developers to create animations with just a few lines of code. MotioniaJS supports a wide range of animations, including scaling, rotation, translation, skewing, and more. With MotioniaJS, you can customize the duration, delay, easing, and other properties of your animations to achieve the exact effect you want. MotioniaJS is optimized for performance, ensuring that your animations run smoothly even on lower-end devices.

Demo image: AnimXYZ

Author

  • Ingram Projects

About a code

AnimXYZ

The standout feature of AnimXYZ is its composability. You can describe an animation with some attributes and variables, and tell the element whether it's animating in or out of the scene with a class. AnimXYZ leverages the power of CSS variables. This feature allows for a nearly limitless number of unique animations without the need to write a single keyframe. AnimXYZ supports a wide range of animations. These include fading, scaling, rotation, translation, skewing, and more. AnimXYZ is optimized for performance. This ensures that your animations run smoothly, even on lower-end devices.

Author

  • Ciaran Walsh

About a code

Izmir Hover Effects

Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements. Packed with a host of styling classes and custom properties, Izmir allows you total control and almost limitless possibilites. Simply load the CSS library in to your project, add the element markup combined with the style classes of your choice to custom build your perfect image hover effect.

Author

  • Oliver Gomes

About a code

CSS Wand

Easy copy-paste beautiful CSS. That can be easily customized further at your own choice.

Demo image: Catto-CSS

Author

  • Alejandro Avalos

About a code

Catto-CSS

Catto-CSS is an online CSS animations library that simplifies the process of adding animations to a website or web application. It allows developers to use the source code without the need to install any dependencies, making it a convenient tool for web projects. Catto-CSS supports a wide range of animations. These include hover, automatic, infinity, and scroll animations.

Author

  • Sarthak Sharma

About a code

Animatopy

Animatopy is a CSS animation library that simplifies the process of adding animations to a website or web application. It provides ready-to-use code snippets for all your animation needs, eliminating the need to add the whole animate.css file in your web projects.

Author

  • Vaibhav Tandon

About a code

vov.css

A CSS Library for small but useful animations.

Author

  • Later

About the library

Animation Library - SCSS/CSS3

Pure CSS animation library. Simply add CSS or SCSS files to your project. Apply animation class to animate an element.

Author

  • Joe Rezendes

About the library

Woah.css

CSS animation library for eccentric web developers.

Author

  • Webkul

About the library

Micron.JS

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using HTML5 data attributes or a chain of JavaScript methods.

Author

  • Ana Travas

About the library

Animista

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.

Author

  • Eric Treacy

About the library

Mimic.css

Mimic.css is an CSS animations library because everyone else is doing it.

Author

  • Pavel

About the library

cssanimation.io

In modern web concept, cssanimation.io is the best controlling animation library for CSS and GreenSock, Moving forward with this library, you need to have a basic idea on HTML and CSS3.

Demo image: Hexa - Awesome CSS Animation Library

Author

  • aouane mohamed amine

About the library

Hexa

An impressive CSS animation library. Give life to your text, photos and anything with just put a magical class.

Author

  • Martin Kníže

About the library

Vivify

Vivify is free CSS animation library.

Author

  • Andrew Nater

About the library

'tachyons-animate'

Single purpose classes to help you orchestrate CSS animations.

Author

  • Tim Holman

About the library

Obnoxious.CSS

Obnoxious CSS is an animation set for the strong of heart, but weak of mind.

Demo image: Infinite - Useful CSS Animations

Author

  • Tilo

About the library

Infinite

A small set of useful infinite CSS animations that you can drop into your project.

Author

  • Anna Migas

About the library

Repaintless.css - Making Animations Fast

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: Dynamic.css

Author

  • Ustym

About the library

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.

Author

  • Kristoffer Andreasen

About the library

wickedCSS

A library for CSS3 animations. The animations are more vibrant than most simple animations.

Author

  • zurb

About the library

Motion UI

The powerful Sass library for creating CSS transitions and animations.

Author

  • Shakr

About the library

Tuesday

A quirky CSS animation library.

Author

  • Brent Jackson

About the library

VHS

Post-future CSS animations.

Author

  • Peter Pavliuk

About the library

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.