Download the following code and insert it into your HTML file.
CSS Animations
#animation#css
CSS Animations
HTML
BounceIn
CSS
.brick { background-color:red; color:#FFF; padding:10px; text-align:center; }
LIVE DEMO
BounceIn
/** * Available Classes */ bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge jackInTheBox rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp var options = 'bounce,flash,pulse,rubberBand,shake,headShake,swing,tada,wobble,jello,bounceIn,bounceInDown,bounceInLeft,bounceInRight,bounceInUp,bounceOut,bounceOutDown,bounceOutLeft,bounceOutRight,bounceOutUp,fadeIn,fadeInDown,fadeInDownBig,fadeInLeft,fadeInLeftBig,fadeInRight,fadeInRightBig,fadeInUp,fadeInUpBig,fadeOut,fadeOutDown,fadeOutDownBig,fadeOutLeft,fadeOutLeftBig,fadeOutRight,fadeOutRightBig,fadeOutUp,fadeOutUpBig,flipInX,flipInY,flipOutX,flipOutY,lightSpeedIn,lightSpeedOut,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,rotateOut,rotateOutDownLeft,rotateOutDownRight,rotateOutUpLeft,rotateOutUpRight,hinge,jackInTheBox,rollIn,rollOut,zoomIn,zoomInDown,zoomInLeft,zoomInRight,zoomInUp,zoomOut,zoomOutDown,zoomOutLeft,zoomOutRight,zoomOutUp,slideInDown,slideInLeft,slideInRight,slideInUp,slideOutDown,slideOutLeft,slideOutRightslideOutUp';
START ANIMATION WHEN OBJECT IS VISIBLE
JAVASCRIPT
jQuery(document).ready(function($){ // Start animation when object enters viewport $(".brick").inViewport(function(px){ var animation = $(this).data('animation'); if( animation !== ''){ if(px) $(this).addClass(animation+" animated"); } }); }); ;(function($, win) { var padding = 50; // Add extra padding to the viewport (to delay the animation start) $.fn.inViewport = function(cb) { return this.each(function(i,el){ function visPx(){ var H = $(this).height(), r = el.getBoundingClientRect(), t=r.top+padding, b=r.bottom+padding; return cb.call(el, Math.max(0, t>0? H-t : (b
HTML
BounceIn