In this article, I’m going to show you ten great CSS animation libraries I’ve found/encountered so far.

I’ve tried about 30, but these ten are the best I’ve found.

Note that these libraries do not require the introduction of JavaScript to run.

Again: This whole article was written on a mobile phone, so if you’re viewing it on a computer or tablet, the screenshots below don’t look very friendly.

1.Animista

I discovered this site not long ago, but I fell in love with it immediately. Honestly, it deserves to be raised.

Animasta is an online generator and library that provides you with the following features:

1. A rich selection of animations

You can choose your favorite animation type (e.g., enter/exit), you can also choose a specific one (e.g., scale-in), and even you can choose different variations for the animation (e.g., scale-in-Right).

2. Custom

Animista also gives you a feature that allows you to customize certain parts of the animation, such as:

  • The duration of the
  • Delay time
  • Or direction

Better yet, you can choose which object to animate, it might be:

  • A simple center square
  • One character at a time
  • background
  • Even a picture

3. Obtain the CSS code

After selecting the animation that suits your needs, you can get the code directly from the site.

You can also choose a compressed version of the code.

4. Download the selected animation

Another amazing feature is that you can put the code for your favorite animations in your list and download only the animations you like. Or you can copy the animation code together.

What’s even better about this site is that it’s responsive, which means you can use it on your mobile browser right now.

2.Animate CSS

Of course, I must also mention Animate CSS, perhaps a well-known animation library.

I’ll briefly show you how to use it.

1. Use

Add the animated class name to the element you want to animate, followed by the animated name.

Such as

<div class="animated slideInLeft"></div>
Copy the code

If you want the animation to be persistent, you can add infinite so that the animation will repeat itself over and over again.

  • Through JavaScript
document.querySelector('.my-element').classList.add('animated'.'slideInLeft')
Copy the code
  • Through the Jquery
$(".my-element").addClass("animated slideInLeft")
Copy the code

2. Additional features

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

  • Time delay

You can delay your animation by using the delay class.

<div class="animated slideInLeft delay-{1-5}"><div>
Copy the code
  • speed

You can control the speed of the animation by adding the classes in the table below.

Class name Speed time
slow 2s
slower 3s
fast 800ms
faster 500ms 
<div class="animated slideInLeft slow|slower|fast|faster"><div>
Copy the code

3.Vivify

Vivify is an animation library that I always thought was an enhanced version of Animate CSS. Its use is the same, with more classes of its own, but also expanded. Add the Vivify class to the element instead of Animated. Such as:

<div class="vivify slideInLeft"></div>
Copy the code
  • Using Javascript
document.querySelector('.my-element').classList.add('vivify'.'slideInLeft')
Copy the code
  • Using Jquery
$(".my-element").addClass("vivify slideInLeft")
Copy the code

Just like Animate CSS, Vivify also provides you with classes to control the duration and delay of the animation.

The classes for delay and duration are available in the following interval:

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

Note: Values are in milliseconds (ms). 1000ms = 1s

4.Magic Animations CSS3

This library has some nice and smooth animations, and I especially like 3D animations.

There’s nothing to talk about. Go for it. Play with the animation.

You can add magicTime {animation_name} to your element as follows:

<div class="magictime fadeIn"></div>
Copy the code
  • Using Javascript
document.querySelector('.my-element').classList.add('magictime'.'fadeIn')
Copy the code
  • Using Jquery
$(".my-element").addClass("magictime fadeIn")
Copy the code

5.cssanimation.io

Cssanimation. IO is an amazing collection of different animations, about 200 in total.

If you can’t find the animation you’re looking for here, you won’t find it anywhere.

It is used in a similar way to Animista. For example, you can select the animation directly and then get it directly from the website, or download the entire library.

use

Add cssAnimation {animation_name} to your element.

<div class="cssanimation fadeIn"></div>
Copy the code
  • Using Javascript
document.querySelector('.my-element').classList.add('cssanimation'.'fadeIn')
Copy the code
  • Using Jquery
$(".my-element").addClass("cssanimation fadeIn")
Copy the code

You can also add an infinite class so that the animation repeats over and over again.

<div class="cssanimation fadeIn infinite"></div>
Copy the code

In addition, cssanimations. IO gives you the ability to animate letters. To do this, you need to introduce the letteranimation.js file in the head tag and then add le{animation_name} to your text element.

<div class="cssanimation leSnake"></div>
Copy the code

For alphabetic animation, add the Sequence class. If you want the letter animations to be unordered, add the Random class.

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

6.Angrytools

If you use generators (Angrytools is good), Angrytools is actually a collection that also includes CSS animation generators.

It may not be as complex as Animista, but I find this one great. The site also gives you the ability to customize animations, such as duration and latency.

But what I like about it is that you can add keyframes to the timeline, and you can write code right there. Also, you can edit an existing effect.

You can get the finished code after the action is done, or download it in its entirety.

7.Hover.css

Hover. CSS is a collection of CSS animations that, unlike the above animations, are triggered every time an element is Hover.

A set of CSS3-driven hover effects that can be applied to links, buttons, Logos, SVG, image features and more.

It has some amazing kinetic effects. And it has classes for animating ICONS, like great fonts.

use

It’s easy to use: Add the class name to your element, such as:

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

8.WickedCSS

WickedCSS is a small CSS animation library. It doesn’t have many animations, but it does have great animations. Most of them are basic animations that we’re familiar with, but they’re really neat.

It’s easy to use, just add the animation name to your element.

<div class="bounceIn"></div>
Copy the code
  • Using Javascript
document.querySelector('.my-element').classList.add('bounceIn')
Copy the code
  • Using Jquery
$(".my-element").addClass("bounceIn")
Copy the code

9.Three Dots

Three Dots is a collection of CSS loading animations, created by Three Dots made from just Three simple elements.

use

Create a div element and add the animation name.

<div class="dot-elastic"></div>
Copy the code

10.CSShake

And finally, a little wobbly wobble.

As the name suggests, CSShake contains a CSS animation library for different types of shake animations.

  • use

Add shake {animation_name} to your element.

<div class="shake shake-hard"></div>
Copy the code
  • Using Javascript
document.querySelector('.my-element').classList.add('shake'.'shake-hard')
Copy the code
  • Using Jquery
$(".my-element").addClass("shake shake-hard")
Copy the code

The latter

  • Original text: dev. To/weeb / 10 – of -…
  • First article: github.com/reng99/blog…
  • For more: github.com/reng99/blog…