In this article I'm showing you 10 of the best CSS animation libraries I have found/encountered so far.

I have tried around 30 overall, majority of them were just smaller ones, some were larger, but in the end, these 10 are the ones I had found the best.
Note that these are all libraries that require no JS to work.

Content of the post

• 1.Animista
• 2.Animate CSS
• 3.Vivify
• 4.Magic Animations CSS3
• 5.cssanimation.io
• 6.Angrytools
• 7.Hover.css
• 8.WickedCSS
• 9.Three Dots
• 10.CSShake

Content of each one

• Cover image
• Short introduction
• Usage and functions
• Github embed(if exists)

1.Animista

This is actually a site I have discovered not too long ago, but I've fallen in love with it immediately. Honestly, this would deserve its own post.

Animista is an online animation generator and library at the same time, which provides you the following features:

1.Choose from various animations

You can choose what type of animations you'd like(like entrance/exist), besides that you can choose a certain one(eg: scale-in), and even more, you can even choose different variants for that animation(eg: scale-in-right).

2.Customization

Animista also provides you a feature which allows you customize certain parts of the animation, such as

• duration
• delay
• or direction

What is even better, you can choose the object you want to animate
It can be:

• a simple centered block
• a character
• background
• or even an image.

3.Get the CSS code

After you have chosen an animation, adjusted to your needs, you can get the code directly from the website.
You can even choose to minify your code.

4.Download selected animations

Another amazing feature is that you can like a certain animation, which basically puts it to your list, and you can download the code of only the ones you have liked. Or you can also choose to copy the code of the those animations together.

But what's even better in this site, that's it's fully responsive, meaning, even if you are on phone now, you can go and try it.

2.Animate CSS

Of course, I must mention Animate CSS too, probably one of the most well known animation library.
I will give a short guide to the usage of it.

1.Usage

You always need to add animated class to any element you want to animate, and then the name of the animation.
Example

<div class="animated slideInLeft"></div>

If you want the animation to be consistent, you can add the infinite class, so the animation will repeat itself nonstop.

• With Javascript

document.querySelector('.my-element').classList.add('animated', 'slideInLeft')

• With Jquery

$(".my-element").addClass("animated slideInLeft")

2.Extra features

Animate CSS provides you some basic classes to manipulate the delay and the speed of the animation.

• delay

You can add delay to your animation with the delay class

<div class="animated slideInLeft delay-{1-5}"><div>

• speed

You can also control the animation speed by adding one of the classes listed.

<div class="animated slideInLeft slow|slower|fast|faster"><div>

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css

If you need the old docs - v3.x.x and under - you can find it here.

Just-add-water CSS animation

Installation

Install with npm:

npm install animate.css --save

Install with yarn:

yarn add animate.css

Getting Started

You can find the Animate.css documentation on the website.

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

Core Team

Daniel Eden	Elton Mesquita	Waren Gonzaga
Animate.css Creator	Maintainer	Core Contributor

License

Animate.css is licensed under the Hippocratic License.

Code of Conduct

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code…

View on GitHub

3.Vivify

Vivify is an animation library, which I have always considered an enhanced version of Animate CSS. It works exactly the same way, has most of its classes, but extended with some more. Instead of adding animated class to an element, you add vivify. For example

<div class="vivify slideInLeft"></div>

• With Javascript

document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')

• With Jquery

$(".my-element").addClass("vivify slideInLeft")

Just like Animate CSS, Vivify also provides you some classes to control the duration and delay of your animations.
Both delay and duration classes are available in the following intervall:

<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>

Note that these values are in ms. 1000ms=1s

<link href="vivify.min.css" rel="stylesheet" type="text/css"/>

4.Magic Animations CSS3

This animation library has some really nice and smooth animations, I especially like the 3D ones.
Not much to say about it, go try it yourself, play with the animations.
Here you add
magictime {animation_name} to your element.

<div class="magictime fadeIn"></div>

• With Javascript

document.querySelector('.my-element').classList.add('magictime', 'fadeIn')

• With Jquery

$(".my-element").addClass("magictime fadeIn")

npm install @minimac/magic.css

npm i magic.css

yarn add magic.css

<link rel="stylesheet" href="yourpath/magic.css">

<link rel="stylesheet" href="yourpath/magic.min.css">

const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')

5.cssanimation.io

cssanimation.io is a collection of a whole bunch of different animations, probably around 200 overall, which is amazing.
If you don't find the animation you need here, then you will find it nowhere.

It works similarly to Animista. For example, you can choose an animation and get the code directly from the site, or you can download the entire library too.

Usage

Add cssanimation {animation_name} to your element.

<div class="cssanimation fadeIn"></div>

• With Javascript

document.querySelector('.my-element').classList.add('cssanimation','fadeIn')

• With Jquery

$(".my-element").addClass("cssanimation fadeIn")

You can also include the infinite class, so the animation will keep on repeating itself.

<div class="cssanimation fadeIn infinite"></div>

Moreover, cssanimation.io provides you a feature to anime letters as well.
For this, you will need the letteranimation.js file included in the head tag, as always, then add le{animation_name} to your text element.

<div class="cssanimation leSnake"></div>

To animate the letters in order, add sequence class, to animate them randomly, add random class.

<div class="cssanimation leSnake {sequence|random}"></div>

Sequence

Random

6.Angrytools

Angrytools is actually a collection if different generators, which includes CSS animation generator as well.
It may not be as complex as Animista, but I found this pretty great too.
This site also provides you some features to customize the animation, like its duration or delay.
But what I like about it, is that you can add keyframes yourself on a so called timeline, then you can write the code directly there. Also, you can edit the existing ones too.

You can get the complete code of the animation when you're finished, or you can download it you want to.

7.Hover.css

Hover.css is a collection of a lot of CSS animation that unlike the ones above, get triggered everytime you hover an element.

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

It has some really amazing animations. And what is more, it also has classes to animate icons as well, such as font awesome.
Read about Font Awesome in my previous article

Font Awesome guide and useful tricks you might not know about.

Patrik Kiss ・ Dec 21 '19

#webdev #html #beginners #tutorial

Usage

It is very simple: just add the name of the class to you element, like

<button class="hvr-fade">Hover me!</button>

8.WickedCSS

WickedCSS is a small CSS animation library, it doesn't have too many animation variants, but the ones it has at least are great. Most of them are the basics we are already familiar with, but they are really clean.

Its usage is simple, just add the name of the animation to your element.

<div class="bounceIn"></div>

• With Javascript

document.querySelector('.my-element').classList.add('bounceIn')

• With Jquery

$(".my-element").addClass("bounceIn")

<link rel="stylesheet" href="wickedcss.min.css"/>

<link rel="stylesheet" href="wickedcss.css"/>

<div class="barrelRoll"> Place your content here </div>

<img src="images/mushroom.png" class="spinner"/>

9.Three Dots

Three Dots is a set of CSS loading animations created with three dots which made by just single element.

• Usage

Just create a div element, and add the name of the animation

<div class="dot-elastic"></div>

npm install three-dots --save

@use 'three-dots';

<div class="dot-elastic"></div>

dot-elastic
dot-pulse
dot-flashing
dot-collision
dot-revolution
dot-carousel
dot-typing
dot-windmill
dot-bricks
dot-floating
dot-fire
dot-spin
dot-falling
dot-stretching

@use 'three-dots' with (
  $dot-width: 20px,
  $dot-height: 20px,
  ...
);

$dot-width: 10px
$dot-height: 10px;
$dot-radius: $dot-width/2;

$dot-color: #9880ff;
$dot-bg-color: 

10.CSShake

And finally, some shaky shake.
As its name suggests, CSShake is a CSS animation library that contains different types of shake animations.

• Usage

Add shake {animation_name} to your element.

<div class="shake shake-hard"></div>

• With Javascript

document.querySelector('.my-element').classList.add('shake','shake-hard')

• With Jquery

$(".my-element").addClass("shake shake-hard")

  $ git clone https://github.com/elrumordelaluz/csshake.git

  $ bower install csshake

  $ npm i csshake

  $ npm run watch
  $ npm run build:raw
  $ npm run build:min

<link rel="stylesheet" type="text/css" href="csshake.css" />`

<div class="shake"></div&gt
<div