Use the animate.css animations from https://daneden.me/animate/
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).