CSS animation is one of the best and easiest ways to make a web page interactive. These animations were made available as part of CSS3 specifications. Animate.css is one of the best libraries available for CSS animations, with a collection of more than 50 types of animations. It was built and maintained by designer Daniel Eden and many other contributors. Animate.css is an open source library and available at GitHub under MIT License.
Installation
There are a few ways to install the library:
- Download directly from Github
- Use directly from a Content Delivery Network (CDN)
- Install using Bower
$ bower install animate.css --save - Install using npm
$ npm install animate.css --save
Usage
Now that we have Animate.css installed, using one of the above methods, we can start using it straight away in our app. For simplicity we will use the CDN URL to consume the Animate.css in our tutorial app. Here is a basic structure of our index.html:
<!DOCTYPE html>
<html>
<head>
<title>Learning Animate.css</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<div class="container">
<h1>Learning Animate.css</h1>
<p>Animate this text!</p>
</div>
</body>
</html>We will use Animate.css effects on paragraph tag in this HTML document. Animate.css has a default class, .animated, that triggers the animation. Other animation effects are used in addition to this default class. For example, let’s apply a bounce animation to our paragraph text:
...
<p class="animated bounce">Animate this text!</p>
...Here is the demo for this:
See the Pen Learning Animate.css – Demo by Jabran Rafique (@jabranr) on CodePen.
Similarly, we can replace the bounce class with any other class from Animate.css and it will get the specific animation. The animations will run only once; they will run again only after we reload the browser. To make it run infinitely add the .infinite class so that it becomes:
...
<p class="animated infinite bounce">This text will animate infinite times.</p>
...Here is the demo for this:
See the Pen Learning Animate.css – Demo (Infinite animation) by Jabran Rafique (@jabranr) on CodePen.
Animate.css works best when used dynamically as it sets more control over animations. To use it dynamically, we will make use of JavaScript. Let’s try that with the following basic example:
First we will add another class to the element, so we can manipulate the element via JavaScript.
...
<p class="js-animate">Animate this text dynamically!</p>
...Now we can manipulate this DOM element using JavaScript to add/remove Animate.css animations when clicked on text.
var $elementToAnimate = document.querySelector('.js-animate');
$elementToAnimate.addEventListener('click', function(e) {
this.classList.toggle('animated');
if (this.classList.contains('bounce')) {
this.classList.remove('bounce');
} else {
this.classList.add('bounce');
}
}, false);Here is the demo for this:
See the Pen Learning Animate.css – Demo (Dynamic animations) – part 3 by Jabran Rafique (@jabranr) on CodePen.
Similarly, you can also use a DOM manipulation library such as jQuery to apply Animate.css classes. In fact, the official documentation provides a short helper method that registers itself with jQuery as a plugin and can easily be used by any element in the DOM. Here is the code for this:
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});Now we can apply Animate.css animation to any element as follows:
$('.js-animate').animateCss('bounce');Customize Animate.css
Using more than 50 different animations in a single project may not be an ideal scenario. Also, if we are looking at the performance side, then adding the complete library in order to use one or few animations may not be useful. Therefore, it is best to customize the library and use only those parts that are needed by the project. Animate.css comes with a built-in Gulp workflow that makes it easier to customize the library to our needs. In order to use the Gulp workflow, the following must be installed already:
- Node
- Gulp npm install -g gulp
To customize the Animate.css, simply open the animate-config.json file and comment out the animations that are NOT required by the project. Then run the gulp command in terminal to generate a customized CSS file. The terminal window will inform on how many animations were activated into generated customized CSS file.
Customizing the Animate.css not only boosts performance, but also keeps the code clean by including only parts that are actually being used in the project.
Sass version
Sass is a CSS preprocessor language that lets us use variables and methods to reuse code inside our project. Sass files are ultimately converted into CSS files before they are used by any web platform.
A Sass-only version is under development. The in-development source code can be found under sass branch of the project at GitHub. Once released, this will provide more robust control for customized and personalized animations by relying less on JavaScript, that is Gulp workflow.
Contribute
Contributions to any open source project make it robust and more useful with bugfixes and new features. Just like any other open source project, Animate.css also welcomes contributions. To contribute to Animate.css project just head over to GitHub project and fork the repository to work on an existing issue, or by adding a new one.
All of the demos in this tutorial can be found at CodePen as Collection. Hope this quick get started guide will make it easier to use the Animate.css library in your next project to create awesome animated effects.
About the author
Jabran Rafique is a London-based web engineer. He currently works as a Front-End Web Developer at Rated People. He has a Masters in Computer Science from Staffordshire University and more than 6 years of professional experience in web systems. He had also served as Regional Lead and Advocate at Google Map Maker in 2008, where he contributed to building digital maps in order to make them available to millions of people worldwide. He has organized and spoken at several international events as well. He writes on his website/blog about different things, and shares code at GitHub and thoughts on Twitter.
