CSS

How to use Animate.css

Let’s face it, the parts of CSS3 that first caught our attention were the animations and transitions. They’re something we never had before without the inclusion of JavaScript.

And just because it’s CSS, doesn’t mean there aren’t libraries out there to help you. One of them being Animate.css.

What is Animate.css?

Animate.css is a library that comes with dozens of cross-browser fun animations built-in that you can use in your project very easily.

It’s the same idea as some of the JavaScript equivalents we are already used to using.

Using Animate.css

The first step into using this library, once you’ve downloaded it, is to load the CSS file into your HTML:

<link rel="stylesheet" href="css/animate.min.css">

After this is loaded into your webpage you have access to all the animation written in it and to call one on an element all you need to do is to give it the class animated a space and then the name of the animation you want.

There’s a list of animation names here. For example:

<h1 class="animated flash">Hello</h1>

If you reload the page you can see right away that the H1 animates on the way in.

This is great, but you usually want to animate elements when buttons are pressed or the user does some action. If you need that you just use a little JavaScript to trigger the click event and add the classes to your element.
Imagine this HTML:

<button>Click</button>
<section>
Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur a felis in nunc fringilla tristique. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui.
</section>

What you want to do is animate the section using a fade, when the button is pressed.

First you give it an opacity of 0. Then add your classes dynamically:

$('button').click(function() {
    $('section').addClass('animated fadeInLeft');
});

If you want to, you can modify the speed of your animations in your CSS, like so:

.animated {
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  animation-duration: 200ms;
}

You can also change the delay in the animation and the number of times it plays using animation-delay and animation-iteration-count.

Another great thing we can do is call a function when the animation ends and perform a different animation for the transition out, or simply run a function. To do this you should use the one event and attach it to the end of the animation and add the class of the animation we want on the element. In my case I will also add a delay class that will allow me to have a delay between the fade in and the fade out:

$('section').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
  $('section').addClass('delay fadeOutRight');
});

As for the CSS all you really need to do is add the delay class:

.delay {
  -animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
}

When you test it after adding this bit of CSS and JavaScript you can see that it creates a perfect fade in animation, it stays for two seconds on the page and then it fades out and all the delays an animations were built using only CSS.

You can see a simple demo of this over at Codepen.

Conclusion

Most of us are still in love with CSS animations and having a library like this on our page just makes it a lot simpler to use and all of these animations being cross-browser is another gigantic plus.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress