Use the animate.css animations from http://daneden.me/animate/

This is my extension on Craig Dennis' fab plugin. It allows us to pass a custom "animated" class for different timings, etc.

Basic

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

With callback

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

With delay (in ms)

$('#your-id').animateCSS('fadeIn', { delay: 500 });

With delay AND callback

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

With delay, callback AND custom animated class

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

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', function(){
        alert('Boom! Animation Complete');
    }, {
        delay: 1000
    });
});

Additional options:

lastCallbackOnly: The given callback will be fired after THE LAST matching element of the selector has ended its animation.

{ 
    lastCallbackOnly : true
}

lastCallback: Optional, additional callback to be called when all animations on all mathing elements of the selector have ended their animation.

{ 
    lastCallback: function() {
        // Code ....
    }
}

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).