30+🔥 Awesome CSS Animation Resources
Tags: css, beginners, javascript, webdev
Published: 2021-05-24 10:57:37

Here is the list of awesome CSS animation resources that will help you to animate components quickly and easily. Some links are from my previous [post](https://dev.to/kiranrajvjd/the-ultimate-web-developer-resources-list-200-resources-2gf5), just updated with some new resources, removed some broken links and arranged resources related to animation only. Hope it will be useful.

### Generate CSS code for animation
The following sites will help you to generate css code for animations which can be copy-pasted directly into your projects.

#### 1. [Bounce.js](http://bouncejs.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etspjuuplbsrg8hnnzda.PNG)

#### 2. [Animista](https://animista.net/play/basic)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8nvvnmsjgiyh5x92uys.PNG)

#### 3. [The App Guruz](https://www.theappguruz.com/tag-tools/web/CSSAnimations/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dp6zeg86j9vyp9j44jf.PNG)

#### 4. [CSS animate](https://cssanimate.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0621pbfm8y366rtmiq4.PNG)

#### 5. [Keyframes](https://keyframes.app/animate/) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn6jr8xpt5ee3hvzkv5w.png)

#### 6. [Animatopy](https://sarthology.github.io/Animatopy/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/927qz3noxlrwtdkp166u.PNG)

##Animation npm Packages
The following links have pre built animation classed that can be used in your project, they come in the form of packages, you can install them using npm or bower. Some have options to link via cdn also. You can achieve desired animation by changing various parameters, for more details check the corresponding web sites.
 
#### 1. [Animo.JS](https://animo.js.org/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhkozz0bzjgi37qt7ykv.PNG)
Animo is a powerful little tool for managing transitions and animations with JavaScript, install it by, `yarn add animo-core`

#### 2. [Hover.CSS](https://ianlunn.github.io/Hover/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4og2h1ehz8mrg4wx7hc6.PNG)
Hover.css can be used in a number of ways; either copy and paste the effect you like from the hover.css or reference the stylesheet. Use the class name of the effect to the element you like to apply on. You also install using npm: `npm install hover.css --save`. If you plan on using many Hover.css effects, you may like to reference the entire Hover.css stylesheet: 
```javascript
<link href="css/hover-min.css" rel="stylesheet">
```

#### 3. [Animate.CSS](https://animate.style/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy96015n0sngr6flo30b.PNG)
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. 
Install with npm: ` $ npm install animate.css --save `
or add it directly to your webpage using a CDN: 
```javascript
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
```

#### 4. [Animatelo](https://gibbok.github.io/animatelo/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kuiyyzibet8hj5dvhaq.PNG)
Animatelo is the porting to Web Animations API of Animate.css. Install via npm using : `npm install animatelo --save` or use cdn
```javascript
<!-- Include the polyfill -->
<script src="https://cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js"></script>

<!-- Include Animatelo -->
<script src="https://cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script>
```

#### 5. [CSShake](https://elrumordelaluz.github.io/csshake/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm2slcpnnad51iy67nll.PNG)
Install using npm: `npm i csshake` or 
```javascript 
<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
```
#### 6. [Magic](https://www.minimamente.com/project/magic/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juc4b4j5mvnicw3miitf.PNG)
Install using `npm i magic.css`.

#### 7 .[Micron](https://webkul.github.io/micron/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0f2058uf6gjaaf7z06l2.PNG)
Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviors are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

Use CDN to install Micron
```javascript 
<link href="https://unpkg.com/webkul-micron@1.1.6/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.1.6/dist/script/micron.min.js" type="text/javascript"></script>
```
You can also use npm: `npm install webkul-micron`

#### 8 .[Motion UI](https://zurb.com/playground/motion-ui)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vd79z14ctgdw2bv11w15.PNG)
Motion UI is a Sass library for quickly creating CSS transitions and animations. Install Motion UI with npm `npm install motion-ui --save`

#### 9. [vhs](https://jxnblk.com/vhs/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv9h1qcgbqsdc7pfz4sr.PNG)

You can install via npm `npm install vhs` or using cdn 
```javascript
<link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css">
``` 

#### 10. [Tachyons Animate](https://github.com/anater/tachyons-animate)
Install with npm: `npm i tachyons-animate`


##Pre build animation css files 
The below sites gives you css files which contain pre built animation code, you can change various values to get your desired animation. To add the animation to your project, simply go to the mentioned sites, download the css file and link it to your projects.

#### 1. [Vivify](http://vivify.mkcreative.cz/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zobw9j2vgfev9w1uoxkx.PNG)
Simply include vivify css file into your document's head 
```javascript 
<link href="vivify.min.css" rel="stylesheet" type="text/css"/>
```

#### 2. [All Animation CSS3](https://all-animation.github.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n59wf6ax7zkrbliq2fcy.PNG)
Link all-animation css file after downloading, 
```javascript 
<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
```

#### 3. [It's Tuesday](https://shakrmedia.github.io/tuesday/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrh18jt8g0bd5sjr7rlk.PNG)
Download the release ZIP file or clone the repository. Include the compiled CSS file in the head of your HTML file.
```javascript 
<link rel="stylesheet" type="text/css" href="css/tuesday.min.css" />
```
Or alternatively, use a CDN link instead if you don't want to host the file.
```javascript
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/shakrmedia/tuesday@v1.1.0/build/tuesday.min.css" />
``` 

#### 4. [Obnoxious](https://tholman.com/obnoxious/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc37v6i21edol428w6qq.PNG)
To use, add the obnoxious.css stylesheet to the head of your document
```javascript 
<link rel="stylesheet" href="/path/to/obnoxious.css">
```

#### 5. [Rocket](https://minimamente.com/example/rocket/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4i8if1477zy91wuq5xd.PNG)
Rocket creates an animation when an item is moved to another element. To use the animation of Rocket, include rocket.css or rocket.min.css and include the JS file: rocket.js or rocket.min.js into your project.
```javascript
<link rel="stylesheet" href="rocket.min.css">
<script src="rocket.min.js"></script>
```

#### 6.[Wicked CSS](https://kristofferandreasen.github.io/wickedCSS/#)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7ifwbbtjkdy2xfzfqc2.PNG)
To use wicked css animations include the wickedcss.min.css to your project. 
```javascript 
<link rel="stylesheet" href="css/wickedcss.min.css">
```

#### 7. [AniJS](http://anijs.github.io/#welcome)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/todmyi89lgrr6m0qyhys.PNG)
Include the AniJS file with script tag. 
```javascript
<script src="anijs-min.js"></script>
```


##Tools
Some tools that help in creating beautiful animations. 

#### 1. [Ceaser](https://matthewlein.com/tools/ceaser)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijp2sun4c6kwtkbjxtnl.PNG)

#### 2. [Wait Animate](https://waitanimate.wstone.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqxqlqft9mdkrwj45egc.PNG)
WAIT! Animate calculates updated keyframe percentages given a wait time meaning you can insert a delay between each animation iteration using pure CSS, without JavaScript.

#### 3.[SVGator](svgator.com)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct5bcx7cwym3g8ejepw1.PNG)
The easiest way to animate SVG, take your SVG to a whole new level without writing a single line of code, Animate icons, logos, backgrounds, and other illustrations.

#### 4. [Stylie](https://jeremyckahn.github.io/stylie/) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtfng7jcp6kwv03hlz7x.PNG)

You can also check the following resources 
1. [CSS Animation Collections](https://codepen.io/etreacy/pen/ZJYoRV)
2. [Animated Spinners](https://tobiasahlin.com/spinkit/)
3. [Click-to-copy CSS effects](https://cssfx.netlify.app/)
4. [Animated SVG icons](http://www.potlabicons.com/) 
5. [Vov](https://vaibhav111tandon.github.io/vov.css/)
6. [Woah](http://www.joerezendes.com/projects/Woah.css/)


   
{% link https://dev.to/kiranrajvjd/35-simple-css-based-pre-loaders-gfl %}
{% link https://dev.to/kiranrajvjd/30-illustration-resources-for-web-developers-23hd %}
{% link https://dev.to/kiranrajvjd/12-simple-css-hover-effects-95d %}
{% link https://dev.to/kiranrajvjd/19-simple-hover-animation-using-css-1l36 %}