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 possibility 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 that 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 favorite and start implementing it!
CSS Libraries ?
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 of what type of loaders are available.
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.
Every wanted to have some special effects on your website without having to learn some complex software programs?
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!
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">
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 types has more than 10 sub-animations! It’s mind-blowing to see how much we can achieve with Animista.
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.
Did someone said, “Treat!”? Well, yes but for developers. Hamburger is a collection of 10+ examples of CSS hamburger animations that are very well suited for navigation for mobile devices.
(1) Download the file from here.
(2) Include the following in your HTML:
<link href="dist/hamburgers.css" rel="stylesheet">
(3) Add base HTML:
<button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button>
(4) 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>
(5) 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>
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.
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>
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 into 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.
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>
What stands out is that it’s really powerful and packed with tonnes of customizable features. If you are someone who is fed up with the usual entrance, hover, or glow animations, GSAP allows you to completely code out your entire animation sequences from scratch!
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 on their demo page linked above. The code is mostly in SCSS and CSS also so you can use features of both.
You can install it via the following commands-
bower install motion-ui --save npm install motion-ui --save
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 focuses on the pulsating effects of an element. Some of the animations it has to offer include;
The usage is really simple. You just have to include its infinite.css file in your project and then you are ready to go!
This one claims to be the first composable CSS animation toolkit. AnimXYZ is powered by CSS variables by which opens an infinite amount of possibilities that can be achieved with this library without you writing a single
What’s great is that it supports the major frontend contenders like Vue, React, and SCSS out of the box!
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/@email@example.com/dist/animxyz.min.css">
Need a wonderful reveal animation library especially on scroll? WOW got you!
It works close to Animate.css and you can easily customize the style, delay, length, offset, and iterations of each animation you chose. One plus point here is that you can customize its default settings easily!
Here are some steps to follow-
(1) Link Animate.css in HTML:
<link rel="stylesheet" href="css/animate.css">
(2) Link and activate WOW.js:
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
(3) 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 effects you might need on any regular project like
- 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 direction.
- Clone its repository:
git clone https://github.com/anater/tachyons-animate
- Alternatively, you can go the NPM route:
npm i tachyons-animate
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 in 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 the shape or size of the element for 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.
It promises to calculate updated keyframe percentages of animation given a wait time.
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 that has mastered curves early in this game. It has more than 10 curve types that can be further customized accordingly with duration, effects, and opacity values.
The gold mine for gradients! When you have a synchronized preview by your side along with browser support and an interactive tool for making the perfect gradient, you can’t complain much.
There are a plethora of options available in this tool from changing the hue/saturation to getting SASS code, complex multi-stop gradients, and more.
Miscellaneous tools ?
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.
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 favorites and show the world what you can make with these amazing resources!