material design animations

Using our animation is simple.

Step 1: Add the class .animated to the element you want to animate.

Step 2: Add one of the following classes:

.bounce

.flash

.pulse

.rubberBand

.shake

.headShake

.swing

.tada

.wobble

.jello

.jackInTheBox

.heartBeat

.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

.rollIn

.rollOut

.zoomIn

.zoomInDown

.zoomInLeft

.zoomInRight

.zoomInUp

.zoomOut

.zoomOutDown

.zoomOutLeft

.zoomOutRight

.zoomOutUp

.slideInDown

.slideInLeft

.slideInRight

.slideInUp

.slideOutDown

.slideOutLeft

.slideOutRight

.slideOutUp

Step 3 (additionally): You may also want to include slow, fast or delay classes or the infinite class for an infinite loop.

Add one of the following classes:

.fast
.faster
.slow
.slower
.delay-1s
.delay-2s
.delay-3s
.delay-4s
.delay-5s
.infinite

Reveal Animations When Scrolling

Thanks to MDB you can easily launch an animation on page scroll.

Detailed documentation and more examples you can find in our Bootstrap animations classes Docs