10 of the best CSS animation libraries.
Tags: css, animation, webdev
Published: 2020-01-05 12:28:56

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 <strong>no JS</strong> to work.

##**Content of the post**
* **[1.Animista](#animista)**
* **[2.Animate CSS](#animatecss)**
* **[3.Vivify](#vivify)**
* **[4.Magic Animations CSS3](#magicanimations)**
* **[5.cssanimation.io](#cssanimation)**
* **[6.Angrytools](#angrytools)**
* **[7.Hover.css](#hovercss)**
* **[8.WickedCSS](#wickedcss)**
* **[9.Three Dots](#threedots)**
* **[10.CSShake](#csshake)**

##**Content of each one**
* **Cover image**
* **Short introduction**
* **Usage and functions**
* **Github embed(if exists)**

***
***
***

#**<u>[1.Animista](https://animista.net)**</u> <a name="animista"></a>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/87aiu8vrns2t7u6m5e0k.jpg)
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`).
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vb44a9bsbqp7xp1w3jp8.jpg)
###**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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ulq6l42o303b4hzgv49s.jpg)

###**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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ivx23i2b1eel0xbpb6yv.jpg)

###**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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q5f2lz2dxrurskwxhdiv.jpg)
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.

***
***
***


#**<u>[2.Animate CSS](https://daneden.github.io/animate.css/)</u>** <a name="animatecss"></a>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ryhdu1ndm5mft23x6m5x.jpg)
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**
```html
<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**
```javascript
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
```
* **With Jquery**
```javascript
$(".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
```html
<div class="animated slideInLeft delay-{1-5}"><div>
```

* **speed**

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

Class name | Speed time
--- | --- | ---
slow | 2s
slower | 3s
fast | 800ms
faster | 500ms
```html
<div class="animated slideInLeft slow|slower|fast|faster"><div>
```
{% github daneden/animate.css %}

***
***
***

#**<u>[3.Vivify](http://vivify.mkcreative.cz/)</u>** <a name="vivify"></a>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2hwmaudhr264372y7cpf.jpg)
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
```html
<div class="vivify slideInLeft"></div>
```
* **With Javascript**
```javascript
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
```
* **With Jquery**
```javascript
$(".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:
```html
<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>
```
*Note that these values are in ms. 1000ms=1s*
{% github Martz90/vivify %}

***
***
***

#**<u>[4.Magic Animations CSS3](https://www.minimamente.com/project/magic/)</u>** <a name="magicanimations"></a>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gzdvfs54gchcf4tbumub.jpg)
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.
```html
<div class="magictime fadeIn"></div>
```
* **With Javascript**
```javascript
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
```
* **With Jquery**
```javascript
$(".my-element").addClass("magictime fadeIn")
```
{% github miniMAC/magic %}

***
***
***

#**<u>[5.cssanimation.io](http://cssanimation.io/index.html)</u>** <a name="cssanimation"></a>
![cssanimation.io](https://thepracticaldev.s3.amazonaws.com/i/go2c72r1vcwv5i5y619u.jpg)
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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sn6p4yhoefrt1d3hmg72.jpg)
**Usage**

Add `cssanimation {animation_name}` to your element.
```html
<div class="cssanimation fadeIn"></div>
```
* **With Javascript**
```javascript
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
```
* **With Jquery**
```javascript
$(".my-element").addClass("cssanimation fadeIn")
```
You can also include the `infinite` class, so the animation will keep on repeating itself.
```html
<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.
```html
<div class="cssanimation leSnake"></div>
```
To animate the letters in order, add `sequence` class, to animate them randomly, add `random` class. 
```html
<div class="cssanimation leSnake {sequence|random}"></div>
```
**Sequence**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tq347sfaqa85mxpkq91l.gif)

**Random**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/no88gtrljava3e4bcde2.gif)
{% github yesiamrocks/cssanimation.io %}

***
***
***


#**<u>[6.Angrytools](https://angrytools.com/css/animation/)</u>** <a name="angrytools"></a>
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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wk09jqpqrpqtbn2z7yzf.jpg)
You can get the complete code of the animation when you're finished, or you can download it you want to.

***
***
***

#**<u>[7.Hover.css](http://ianlunn.github.io/Hover/)</u>** <a name="hovercss"></a>
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*
{% link https://dev.to/weeb/font-awesome-guide-and-useful-tricks-you-might-ve-not-known-about-until-now-o15 %}
###**Usage**
It is very simple: just add the name of the class to you element, like
```html
<button class="hvr-fade">Hover me!</button>
```
{% github IanLunn/Hover %}

***
***
***

#**<u>[8.WickedCSS](http://kristofferandreasen.github.io/wickedCSS/#)</u>** <a name="wickedcss"></a>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lyda457w1aqqacfemzre.jpg)
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.
```html
<div class="bounceIn"></div>
```
* **With Javascript**
```javascript
document.querySelector('.my-element').classList.add('bounceIn')
```
* **With Jquery**
```javascript
$(".my-element").addClass("bounceIn")
```
{% github kristofferandreasen/wickedCSS %}

***
***
***


#**<u>[9.Three Dots](https://nzbin.github.io/three-dots/)</u>** <a name="threedots"></a>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wsskqxe8zxx54j9imd8e.gif)
>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
```html
<div class="dot-elastic"></div>
```
{% github nzbin/three-dots %}

***
***
***

#**<u>[10.CSShake](https://elrumordelaluz.github.io/csshake/)</u>** <a name="csshake"></a>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tj7alap863n59b4n5zbz.jpg)
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.
```html
<div class="shake shake-hard"></div>
```
* **With Javascript**
```javascript
document.querySelector('.my-element').classList.add('shake','shake-hard')
```
* **With Jquery**
```javascript
$(".my-element").addClass("shake shake-hard")
```
{% github elrumordelaluz/csshake %}