DEV Community

Cover image for 10 of the best CSS animation libraries.
Patrik Kiss
Patrik Kiss

Posted on • Edited on

CSS Animation Library 10 of the best CSS animation libraries.

#css #animation #webdev

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

Content of each one

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

1.Animista

Alt Text
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

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

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

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
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

Alt Text
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>
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode
  • With Jquery 
$(".my-element").addClass("animated slideInLeft")
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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 
<div class="animated slideInLeft slow|slower|fast|faster"><div>
Enter fullscreen mode Exit fullscreen mode

GitHub logo animate-css / animate.css

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

Animate.css

GitHub Version Github Star Github Fork License

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
Enter fullscreen mode Exit fullscreen mode

Install with yarn:

yarn add animate.css
Enter fullscreen mode Exit fullscreen mode

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
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

Alt Text
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>
Enter fullscreen mode Exit fullscreen mode
  • With Javascript 
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
Enter fullscreen mode Exit fullscreen mode
  • With Jquery 
$(".my-element").addClass("vivify slideInLeft")
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo Martz90 / vivify

Vivify is free CSS animation library.

Vivify Logo

Vivify web presentation

Vivify is free CSS animation library.

Usage

Simply include vivify css file into your document's <head>

<link href="vivify.min.css" rel="stylesheet" type="text/css"/>
Enter fullscreen mode Exit fullscreen mode

Add class vivify to the element you want to animate. If you want your animation to be infinite, you can also add infinite class.

List of class names you can add

  • ball
  • blink
  • driveInBottom
  • driveInLeft
  • driveInRight
  • driveInTop
  • driveOutBottom
  • driveOutLeft
  • driveOutRight
  • driveOutTop
  • fadeIn
  • fadeInBottom
  • fadeInLeft
  • fadeInRight
  • fadeInTop
  • fadeOut
  • fadeOutBottom
  • fadeOutLeft
  • fadeOutRight
  • fadeOutTop
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • fold
  • hitLeft
  • hitRight
  • jumpInLeft
  • jumpInRight
  • jumpOutLeft
  • jumpOutRight
  • popIn
  • popInBottom
  • popInLeft
  • popInRight
  • popInTop
  • popOut
  • popOutBottom
  • popOutLeft
  • popOutRight
  • popOutTop
  • pullDown
  • pullLeft
  • pullRight
  • pullUp
  • pulsate
  • rollInBottom
  • rollInLeft
  • rollInRight
  • rollInTop
  • rollOutBottom
  • rollOutLeft
  • rollOutRight
  • rollOutTop
  • shake
  • spin
  • spinIn
  • spinOut
  • swoopInBottom
  • swoopInLeft
  • swoopInRight
  • swoopInTop
  • swoopOutBottom
  • swoopOutLeft
  • swoopOutRight
  • swoopOutTop
  • unfold

Preview all animations here

delay and duration classes

If you want to quickly change delay or duration you…


View on GitHub


4.Magic Animations CSS3

Alt Text
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>
Enter fullscreen mode Exit fullscreen mode
  • With Javascript 
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
Enter fullscreen mode Exit fullscreen mode
  • With Jquery 
$(".my-element").addClass("magictime fadeIn")
Enter fullscreen mode Exit fullscreen mode

GitHub logo miniMAC / magic

CSS3 Animations with special effects

🎩 magic

CSS3 Animations with special effects. (→ 3.1 kB gzip)

Demo

Checkout the demo for the animations here

Table of Contents

Installation

GitHub Package Registry - Package url

npm install @minimac/magic.css
Enter fullscreen mode Exit fullscreen mode

NPM - Package url

npm i magic.css
Enter fullscreen mode Exit fullscreen mode

YARN - Package url

yarn add magic.css
Enter fullscreen mode Exit fullscreen mode

Getting Started

Include the file magic.css or include the minified version magic.min.css

<link rel="stylesheet" href="yourpath/magic.css">
Enter fullscreen mode Exit fullscreen mode

or

<link rel="stylesheet" href="yourpath/magic.min.css">
Enter fullscreen mode Exit fullscreen mode

Usage with JavaScript

This is a sample code for on hover effect with JavaScript. First, Include the class magictime and then a desired animation class.

const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
Enter fullscreen mode Exit fullscreen mode

If you…

View on GitHub

5.cssanimation.io

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.
Alt Text
Usage

Add cssanimation {animation_name} to your element.

<div class="cssanimation fadeIn"></div>
Enter fullscreen mode Exit fullscreen mode
  • With Javascript 
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
Enter fullscreen mode Exit fullscreen mode
  • With Jquery 
$(".my-element").addClass("cssanimation fadeIn")
Enter fullscreen mode Exit fullscreen mode

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

<div class="cssanimation fadeIn infinite"></div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

<div class="cssanimation leSnake {sequence|random}"></div>
Enter fullscreen mode Exit fullscreen mode

Sequence
Alt Text

Random
Alt Text

GitHub logo yesiamrocks / cssanimation.io

CSS Animation Library for Developers and Ninjas

Getting started with cssanimation.io

GitHub license

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. We believe you have that. If you are pretty confused, just refreshing your idea from here to go along more easily.

This library is too easy to install and implement. Anything you can be done with our relevant animation class name. So Download and let’s get started with this library.

We also offer to you GreenSock animation, just fly over here to get the guideline.

To get started, from the outset you download the complete library or use a CDN hosted version by jsDelivr. All CDN URLs below:

Usage

  1. Include the cssanimation.css or cssanimation.min.css stylesheet into the…
View on GitHub

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.
Alt Text
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

weeb

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>
Enter fullscreen mode Exit fullscreen mode

GitHub logo IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Hover.css

Buy Me A Coffee

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Demo | Tutorial

Contents

Download/Install

  • NPM: npm install hover.css --save
  • Bower: bower install hover --save
  • Download Zip

How To Use

Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd…

View on GitHub

8.WickedCSS

Alt Text
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>
Enter fullscreen mode Exit fullscreen mode
  • With Javascript 
document.querySelector('.my-element').classList.add('bounceIn')
Enter fullscreen mode Exit fullscreen mode
  • With Jquery 
$(".my-element").addClass("bounceIn")
Enter fullscreen mode Exit fullscreen mode

GitHub logo kristofferandreasen / wickedCSS

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

wickedCSS

A library for CSS3 animations.

The animations include regular CSS3 animations to be used in all settings Additionally, the library includes a number of wicked animations, which aren't applicable in all situations They can be fun to play with.

For examples and documentation View Project Page.

Usage

To use the library, simply download and link to the file in your header.

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

Or the non-minified version.

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

Simply add the animation class to your element and it will perform your wicked animation.

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

In this case, the contents of the div will perform the barrelRoll animation. All the classes can be found on the Project Page.

The classes can be applied to all elements including images.

<img src="images/mushroom.png" class="spinner"/>
Classes
  • floater
  • barrelRoll
  • rollerRight
  • rollerLeft
  • heartbeat
  • pulse
  • rotation
  • sideToSide
  • zoomer
  • zoomerOut
  • spinner
  • wiggle
  • shake
  • pound
  • slideUp
  • slideDown
  • slideRight
  • …
View on GitHub

9.Three Dots

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

GitHub logo nzbin / three-dots

🔮 CSS loading animations made with single element.

Three Dots

Build Status npm license Financial Contributors on Open Collective

Three Dots is a set of CSS loading animations made with just single element. I think the project can not only enhance your CSS skills but also improve your imagination.

Installation

npm install three-dots --save
Enter fullscreen mode Exit fullscreen mode

Usage

  1. Import the styles in your Sass file:
@use 'three-dots';
Enter fullscreen mode Exit fullscreen mode
  1. Add just one div tag:
<div class="dot-elastic"></div>
Enter fullscreen mode Exit fullscreen mode

Here’s the list of three-dots classes you can choose from:

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

Customization

Customize the dot's size ( color, spacing, etc. ) with Dart Sass API.

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

The available variables and their default values.

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

$dot-color: #9880ff;
$dot-bg-color:
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

10.CSShake

Alt Text
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>
Enter fullscreen mode Exit fullscreen mode
  • With Javascript 
document.querySelector('.my-element').classList.add('shake','shake-hard')
Enter fullscreen mode Exit fullscreen mode
  • With Jquery 
$(".my-element").addClass("shake shake-hard")
Enter fullscreen mode Exit fullscreen mode

GitHub logo elrumordelaluz / csshake

CSS classes to move your DOM!

CSShake npm version

Some CSS classes to move your DOM!

Live Demo

Download Center

You could download the complete csshake.css file or separated files for each shake animation (i.e csshake-little.css). Each one expanded or minified.

Why

I had to do a 'shake-animation' for a big project. First, I did it in vanilla CSS. After finish it I discover this cool jQuery plugin by @jackrugile. Then I started to think in made this little CSS project

Install

Fork this repo

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

or via Bower

  $ bower install csshake

or via npm

  $ npm i csshake

scripts

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

CDN

Now is also available in cdnjs for each shake animation: https://cdnjs.com/libraries/csshake

How to use

First include the CSS file

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

Then call the different classes on the element you want to shake!

<div class="shake"></div&gt
<div
…
View on GitHub

Top comments (11)

Collapse
 
aksarben profile image
Dick Adams •

Changing my site's marquees (hymntime.com/tch) is on my to do list, but last time I looked the W3ORG spec was still a draft. Did any of these libraries address marquees? Did any of them stand out among the pack for implementing marquees?

Collapse
 
alex95599499 profile image
Alex •

I am used css library animate.style. This is a good library. But one more point. Clicking or hovering the mouse should trigger the animation. Use the class add operator. After animation, remove this class. How to find out the animation is over. I use the el.addEventListener("animationend", () => { //del class// }); function for this. I found information about this here: profi.spage.me/css/use-css-library...

Collapse
 
mezzolite profile image
Mez Charney •

This is such a useful list! I will definitely be using one of these in my project.

Collapse
 
itz_giddy profile image
Audiophile •

Thank you for doing this, this was helpful!

Collapse
 
u_cancall_me_rj profile image
RJ-1998 •

OMG,Such a nice list of css animation library. Loved it!

Collapse
 
dochan profile image
Farhan Yahya •

Thanks, will be using one of these in my upcoming project.

Collapse
 
loctran016 profile image
LocTran016 •

This post is amazing

Collapse
 
animatlio profile image
Animatly.io •

Awesome Post! For animated Icons or Illustrations in Lottie format, you can also check out animatly.io/ the way it is animated is quite similar.

Collapse
 
tomwilusz profile image
Lordicon •

Well, I just want to mention Lordicon Animated Icons
At the end of the day, it is not animated CSS library but still worth checking out. ;)

Collapse
 
stackfindover profile image
Stackfindover •

Wow This is awesome, thanks for sharing :)
Top 10 Upcomming Animated Slider In 2021

View full discussion (11 comments)

Read next

dev007777 profile image

Python beats Javascript, Next.js Leap & the AI Coding Wars

TheDev -

mcsee profile image

Code Smell 279 - Loop Premature Optimization

Maxi Contieri -

chipm0nk profile image

From Concept to Code: Building a Simple Endless Runner Game

Chipm0nk -

gleamso profile image

The No-Fluff Guide to OpenGraph Images That Actually Work 🎯

gleamso -