DEV Community

Cover image for 30+🔥 Awesome CSS Animation Resources
Kiran Raj R
Kiran Raj R

Posted on • Edited on

30+🔥 Awesome CSS Animation Resources

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

Alt Text

2. Animista

Alt Text

3. The App Guruz

Alt Text

4. CSS animate

Alt Text

5. Keyframes

Alt Text

6. Animatopy

Alt Text

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

Alt Text
Animo is a powerful little tool for managing transitions and animations with JavaScript, install it by, yarn add animo-core

2. Hover.CSS

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

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

3. Animate.CSS

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

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
Enter fullscreen mode Exit fullscreen mode

4. Animatelo

Alt Text
Animatelo is the porting to Web Animations API of Animate.css. Install via npm using : npm install animatelo --save or use cdn

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

5. CSShake

Alt Text
Install using npm: npm i csshake or

<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
Enter fullscreen mode Exit fullscreen mode

6. Magic

Alt Text
Install using npm i magic.css.

7 .Micron

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

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

You can also use npm: npm install webkul-micron

8 .Motion UI

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

Alt Text

You can install via npm npm install vhs or using cdn

<link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css">
Enter fullscreen mode Exit fullscreen mode

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

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

2. All Animation CSS3

Alt Text
Link all-animation css file after downloading,

<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
Enter fullscreen mode Exit fullscreen mode

3. It's Tuesday

Alt Text
Download the release ZIP file or clone the repository. Include the compiled CSS file in the head of your HTML file.

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

Or alternatively, use a CDN link instead if you don't want to host the file.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/shakrmedia/tuesday@v1.1.0/build/tuesday.min.css" />
Enter fullscreen mode Exit fullscreen mode

4. Obnoxious

Alt Text
To use, add the obnoxious.css stylesheet to the head of your document

<link rel="stylesheet" href="/path/to/obnoxious.css">
Enter fullscreen mode Exit fullscreen mode

5. Rocket

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

<link rel="stylesheet" href="rocket.min.css">
<script src="rocket.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

6.Wicked CSS

Alt Text
To use wicked css animations include the wickedcss.min.css to your project.

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

7. AniJS

Alt Text
Include the AniJS file with script tag.

<script src="anijs-min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Tools

Some tools that help in creating beautiful animations.

1. Ceaser

Alt Text

2. Wait Animate

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

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

Alt Text

You can also check the following resources

  1. CSS Animation Collections
  2. Animated Spinners
  3. Click-to-copy CSS effects
  4. Animated SVG icons
  5. Vov
  6. Woah

Top comments (6)

Collapse
 
afif profile image
Temani Afif

you are mostly repeating what you listed here: dev.to/kiranrajvjd/the-ultimate-we... ...

Collapse
 
kiranrajvjd profile image
Kiran Raj R

Yes, some links are not working and it's a total mess, I just need to keep it seperate so as to make easy to look when needed.

Collapse
 
afif profile image
Temani Afif

You can always edit your old posts. It starts to be a bit redundant because you last posts are repeating what you listed in older posts. This can be really confusing for many users.

Thread Thread
 
kiranrajvjd profile image
Kiran Raj R • Edited

Sorry for the inconvenience, till now I never received any such comments, I was unaware about it, will only include new resources from next time.

Thread Thread
 
tuanfrontend profile image
Eden Tuấn

Hello

Thread Thread
 
memoev profile image
Memo Villalta

hello