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.
Class name | Speed time |
---|---|
slow | 2s |
slower | 3s |
fast | 800ms |
faster | 500ms |
<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…
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
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"/>
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
delay and duration classes
If you want to quickly change delay or duration you…
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")
🎩 magic
CSS3 Animations with special effects. (→ 3.1 kB gzip)
Demo
Checkout the demo for the animations here
Table of Contents
- Installation
- Getting Started
- Usage with JavaScript
- Usage with jQuery
- HTML & CSS tips
- 🎉 Gulp and SCSS (SASS) compiling
- ✅ Browser Support
Installation
GitHub Package Registry - Package url
npm install @minimac/magic.css
NPM - Package url
npm i magic.css
YARN - Package url
yarn add magic.css
Getting Started
Include the file magic.css or include the minified version magic.min.css
<link rel="stylesheet" href="yourpath/magic.css">
or
<link rel="stylesheet" href="yourpath/magic.min.css">
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')
If you…
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>
yesiamrocks / cssanimation.io
CSS Animation Library for Developers and Ninjas
Getting started with 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. 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:
- cssanimation.css: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/cssanimation.min.css
- cssanimation.min.css: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/cssanimation.min.css
- letteranimation.js: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/letteranimation.js
- letteranimation.min.js: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/letteranimation.min.js
- cssanimation greenSock version: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/gsap-version/cssanimation-gsap.js
- cssanimation greenSock min version: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/gsap-version/cssanimation-gsap.min.js
Usage
- Include the
cssanimation.css
orcssanimation.min.css
stylesheet into the…
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
Usage
It is very simple: just add the name of the class to you element, like
<button class="hvr-fade">Hover me!</button>
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
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.
Contents
- Download/Install
- How To Use
- What's Included?
- Browser Support
- Using Grunt for Development
- Using Sass/LESS for Development
- Contribute to Hover.css
- Licenses
- Hire Ian Lunn
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…
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")
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
- …
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>
nzbin / three-dots
🔮 CSS loading animations made with single element.
Three Dots
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
Usage
- Import the styles in your Sass file:
@use 'three-dots';
- Add just one
div
tag:
<div class="dot-elastic"></div>
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,
...
);
The available variables and their default values.
$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")
elrumordelaluz / csshake
CSS classes to move your DOM!
Some CSS classes to move your DOM!
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>
<div
…
Top comments (11)
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?
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...
This is such a useful list! I will definitely be using one of these in my project.
Thank you for doing this, this was helpful!
OMG,Such a nice list of css animation library. Loved it!
Thanks, will be using one of these in my upcoming project.
This post is amazing
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.
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. ;)
Wow This is awesome, thanks for sharing :)
Top 10 Upcomming Animated Slider In 2021