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
2. Animista
3. The App Guruz
4. CSS animate
5. Keyframes
6. Animatopy
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
Animo is a powerful little tool for managing transitions and animations with JavaScript, install it by, yarn add animo-core
2. Hover.CSS
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">
3. Animate.CSS
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"/>
4. Animatelo
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>
5. CSShake
Install using npm: npm i csshake or
<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
6. Magic
Install using npm i magic.css.
7 .Micron
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>
You can also use npm: npm install webkul-micron
8 .Motion UI
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
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">
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
Simply include vivify css file into your document's head
<link href="vivify.min.css" rel="stylesheet" type="text/css"/>
2. All Animation CSS3
Link all-animation css file after downloading,
<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />
3. It's Tuesday
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" />
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" />
4. Obnoxious
To use, add the obnoxious.css stylesheet to the head of your document
<link rel="stylesheet" href="/path/to/obnoxious.css">
5. Rocket
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>
6.Wicked CSS
To use wicked css animations include the wickedcss.min.css to your project.
<link rel="stylesheet" href="css/wickedcss.min.css">
7. AniJS
Include the AniJS file with script tag.
<script src="anijs-min.js"></script>
Tools
Some tools that help in creating beautiful animations.
1. Ceaser
2. Wait Animate
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
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
You can also check the following resources
Top comments (6)
you are mostly repeating what you listed here: dev.to/kiranrajvjd/the-ultimate-we... ...
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.
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.
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.
Hello
hello