A text fading in and out or a link popping up when hovered. What do these two things have in common? Yes, they all animate.
What’s special about the web development space is that along with static elements, it also provides an infinite possibilities of dynamic elements which can animate the way it is needed. It can be done via simple CSS rules or by using a library or even a generator tool would do the same.
It’s just a matter of what type of animation you want and how you want to implement them. So that you don’t have to hop around from one website to another, we have curated 20 of the best CSS animation resources from libraries to generator tools in this article. Pick your favourite and start implementing it!
Sponsored:
CSS Libraries 📚
1. Whirl
Made by Jhey Tompkins, a CSS wizard in himself, Whirl is a curation of CSS loading animations. It takes the pain out of a developer because it already has 106 whirls and more.
Take a look at the demo website to get a taste what type of loaders are available.
Usage:
You can install it on your projects via NPM or Yarn commands -
npm i @jh3y/whirl
yarn add @jh3y/whirl
Else, if you want to get a quick spin up, you are free to use the CSS or SASS files.
2. Magic Effects
Every wanted to have some ‘special-effects’ on your website without having to learn some complex software programmes?
The Magic Effects library has got them all. Whether you want the usual static effects like OPENDOWNLEFT which make an element appear as if it’s opening from a box and then going down, or something more real-life like PERSEPECTIVEUPRETURN that uses the CSS perspective property to make you feel like the element is in a 3D space, this library suits the best!
Usage:
The good thing is that we can use it with both CSS and JavaScript files. Let’s see how to do it in CSS:
npm i magic.css
yarn add magic.css
You can also include its minified version in your HTML boilerplate:
<link rel="stylesheet" href="yourpath/magic.min.css">
3. Animista
What makes Animista unique from others you say? Well, it has a fully-featured animation demo workspace where you can literally preview each of the different types of animation it has to offer along with different options like delay, iteration-count, direction, fill-mode and more!
And did I told you that each of its 15 ‘Basic’ animation type has more than 10 sub-animations! It’s mind-blowing to see how much we can achieve with Animista.
Usage:
There are three steps in this-
- Get a taste of different animations from its editor.
- Pick your favourite ones by clicking on the heart button.
- When you are ready, click the download button on the top-right corner to access the download screen.
When you do this, an animate.css file will be downloaded which you can then easily add to your project directory.
4. Hamburgers
Did someone said, “Treat!”? Well, yes but for developers. Hamburgers is a collection of 10+ examples of CSS hamburger animations which are very well suited for navigation for mobile devices.
From the usual ‘Boring’ one to the exciting ‘Empathic’, you can get them all. The good thing here is that it has a tremendous support for different stacks be it SASS or Ruby on Rails.
Usage:
- Download the file from here.
-
Include the following in your HTML:
<link href="dist/hamburgers.css" rel="stylesheet"> -
Add base HTML:
<button class="hamburger" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
-
Append the class name of the type of hamburger you want:
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
Finally, trigger the active state:
<button class="hamburger hamburger--collapse is-active" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
5. Animate.css
This has to come right? Probably one of the most popular CSS animation libraries out there. Animate.css is one of those libraries which work great for emphasis, home pages, sliders, and attention-guiding hints.
With powers of NPM, Post CSS + postcss-preset-env, you can create custom builds pretty easily. For accessibility, it supports [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query.
Usage:
npm install animate.css --save
yarn add animate.css
Or add it’s CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
Then use it on any element like this:
<div class="animate__animated animate__bounce"></div>
6. Hover.css
Finding some inspiration on different hover states and how they should animate? Hover.css got you back with an amazing set of 2D, icons, borders, speech bubbles animations to integrate in your button or link styles.
The best part? All effects make use of a single element and are self contained so you can easily copy and paste them whenever needed.
Usage:
Install it by running the following commands-
npm install hover.css --save
bower install hover --save
Or you can directly download its ZIP code. Once it is installed, you can use it like:
<a href="#" class="hvr-grow">Add to Basket</a>
7. GSAP
GSAP or GreenSock Animation Platform is not just another CSS library, it’s an entire platform of animation services on the web which can be achieved by both CSS and JavaScript.
What stands out is that it’s really powerful and packed with tonnes of customisable features. If you are someone who is fed up of the usual entrance, hover or glow animations, GSAP allows you to completely code out your entire animation sequences from scratch!
Usage:
There is so much to chose from here that they made an entire webpage just to choose what to install. Go to this page and select the different features you want to incorporate and make sure you visit their Getting Started guide.
8. Motion UI
Motion UI is a SASS library for creating flexible CSS transitions and animations. The core utility here is to transition components in and out. You can then apply these transitions to any UI element you like.
You can tinker around with the variety of animations it has to offer in their demo page linked above. The code is mostly in SCSS and CSS also so you can use features of both.
Usage:
You can install it via the following commands-
bower install motion-ui --save
npm install motion-ui --save
9. Infinite
Probably the simplest of the lot here. Infinite is a simple set of useful infinite CSS animations that you can drop into your project.
It mainly focusses on the pulsating effects for an element. Some of the animations it has to offer include; pulsate, opacityPulse and alertPulse.
Usage:
The usage is really simple. You just have to include its infinite.css file in your project and then you are ready to go!
10. AnimXYZ
This one claims to be the first composable CSS animation toolkit. AnimXYZ is powered by CSS variables by which it opens an infinite amount of possibilities that can be achieved with this library without you writing a single [@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) code.
What’s great is that it supports the major frontend contenders like Vue, React and SCSS out of the box!
Usage:
Install it with:
# with npm
npm install @animxyz/core
# with yarn
yarn add @animxyz/core
Or simply use it with a CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core@0.4.0/dist/animxyz.min.css">
11. WOW.js
Need a wonderful reveal animation library specially on scroll? WOW got you!
It’s works close to Animate.css and you can easily customise the style, delay, length, offset, and iterations of each animation you chose. One plus point here is that you can customise its default settings easily!
Usage:
Here are some steps to follow-
-
Link Animate.css in HTML:
<link rel="stylesheet" href="css/animate.css">
-
Link and activate WOW.js:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
-
Use it in an element:
<h3 class="wow">Content to Reveal Here</h3>
12. Wicked CSS
Wicked CSS is developed for those who want to spice up their sites with some sweet animation effects it offers.
It has some really sweet animation demos and examples on their website and offers just enough of effects you might need on any regular project like zoomer, shake or fadeIn.
Usage:
- Download the Wicked CSS file from here.
-
Add this to your HTML:
<link rel="stylesheet" href="css/wickedcss.css">
-
Apply the animation you want:
<div class="barrelRoll">My animation</div>
13. Tachyons Animate
Tachyons Animate provides you with just the single-purpose classes to help you create CSS animations.
There are zero animation keyframes and there are only sing-purpose classes to use. With this you can control the animation play state, iteration count and the direction.
Usage:
-
Clone its repository:
git clone https://github.com/anater/tachyons-animate
-
Alternatively, you can go the NPM route:
npm i tachyons-animate
Sponsored:
CSS Animation Generators ⚙️
1. Angry Tools
The first of the lot is from Angry Tools and they managed to put some of the common animations you will need in a project at a single place.
With their interactive demo by which you can control the animation function, you get the desired code immediately which you can then copy/paste or adjust the values accordingly.
2. CSS Animate
How about combining the power of a timeline view with animation generation? This one provides the best of both worlds.
You simply drag, pan, change shape or size of the element on a specified duration in the timeline and it will play the animation. They have a robust set of examples to get you started with and the code works in all modern browsers.
3. WAIT! Animate
It promises to calculate updated keyframe percentages of an animation given a wait time.
This means you can insert a delay between each animation iteration using pure CSS, without JavaScript with this tool. It also supports SASS mixins.
4. Ceaser
Want to tinker around with the bezier curve functions? Maybe you want to have some ease-out at first and then go with easeInSine?
Fret not because Ceaser is that tool which has mastered curves early in this game. It has more than 10 curve types which can be further customised accordingly with duration, effects and opacity values.
5. Ultimate CSS Gradient Generator by ColorZilla
The gold mine for gradients! When you have a synchronised preview by your side along with browser support and interactive tool for making the perfect gradient, you can't complaint much.
There are plethora of options available in this tool from changing the hue/saturation to getting SASS code, complex multi-stop gradients and more.
Sponsored:
Miscellaneous tools 🛠
1. CSS Animation tutorials and guides
This is a curated weekly roundup of all the latest in web animation. You get:
- Inspirations on all the new projects made by developers with CSS animations.
- A complete guide on how to start working on an animation project with latest CSS standards.
- Tutorials with demos and code examples.
- A weekly newsletter which shares the latest and greatest animations.
2. Cool CSS Animation
With this website, you can easily discover CSS animations by learning to code really cool animations with amazing effects. You get:
- CSS animation examples: to get some inspiration.
- CSS animation tutorials: to learn some cool HTML and CSS tricks.
- CSS animation cheatsheets: to code CSS animations faster with code snippets.
We hope you liked these CSS animation resources. Don’t forget to bookmark your favourites and show the world what you can make with these amazing resources!
Top comments (1)
Thank you