A while back, I stumbled across a very nice set of CSS3 animations by Dan Eden which (if you haven’t already clicked the link and looked for yourself) are plug and play. All you do is add a class to the element you want to animate and it… well… animates. This is great! Dan recommends that you use something like $('.bouncy').addClass('bounceInDown'); to add the class with jQuery and this is the simplest method to get you started. In fact this is the method I used when I started my site redesign.

I quickly ran into issues though. Now, it wasn’t anything that animate.css does or doesn’t do. More the fact that there was no way to replace jQuery animations with the CSS3 fancy-pants ones.

“What did you do?” I hear you ask.

Well, I’ll tell you. I wrote a little function that handled adding the classes to any element dynamically. This gave me a little improvement in terms of ease of use and speed. There was still something missing though. I only realised when I had 3 animations that needed to run one after each other, that there was no way to determine when a CSS3 animation had completed so I could run another one. In the interim I set a delay parameter so I could say ‘do this, wait 3 seconds then do this’.

This ‘callback’ functionality does exist and CSS3 animations do indeed trigger an event when they finish, you just need to set a javascript event listener to detect that so you can apply some actions. After a little Googling I added this to my function. This now worked in a very similar way to jQuery’s own animate function so it was very familiar.

Then came the plugin

A few weeks later, Dan (@_dte) mentioned me in a tweet saying that my site was using his animate.css and looked good. I thanked him and showed him my jQuery function that helped. He seemed suitably impressed and asked if he could use it. It was already a public gist on github so I said no problem. That evening I decided it would be even better if it was an actual plugin that could be used in an even similar way to jQuery’s native functions. And so jQuery animateCSS was born.

To use it is pretty easy.

Basic

$('#your-id').animateCSS('fadeIn');

With callback

$('#your-id').animateCSS('fadeIn', function(){
    alert('Boom! Animation Complete');
});

With delay (in ms)

$('#your-id').animateCSS('fadeIn', 500);

With delay AND callback

$('#your-id').animateCSS('fadeIn', 1000, function(){
    alert('Boom! Animation Complete');
});

If you want to hide an element when the page loads and then apply an effect, it might look something like this:

<style>
    .js #your-id {
        visibility:hidden;
    }
</style>

$(window).load( function(){
    $('#your-id').animateCSS('fadeIn', 1000, function(){
        alert('Boom! Animation Complete');
    });
});

Remember to use a .js (or .no-js depending on how you role) so that the element still displays for non javascript users (and Google previews).

Again, the plugin is available here: https://github.com/craigmdennis/animateCSS/

That’s it guys. Have fun.