Bootstrap animations
A bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Basic usage
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
.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 the class infinite for an infinite loop.
<img class="animated bounce infinite" src="https://mdbootstrap.com/img/logo/mdb-transparent.png">
Advanced usage
You can do a whole bunch of other stuff with animations when you combine it with jQuery or add your own CSS rules.
Dynamically add animations using jQuery with ease:
$('#yourElement').addClass('animated bounceOutLeft');
You can also detect when an animation ends:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
Note: jQuery.one()
is used when you want to execute the event handler at most once. More information here.
You can also extend jQuery to add a function that does it all for you:
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)
Reveal Animations When Scrolling
Basic usage
Step 1: Initialize script for animations on a scroll.
new WOW().init();
Step 2: Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.
<img src="..." class="wow">
Step 3: Pick an animation style from the list of animations , then add the CSS class to the HTML element.
<img src="..." class="wow fadeInUp">
Adding multiple animations via jQuery
If you want to use the same animation trough the entire page, you can use jQuery
addClass()
to make it at once.
$( ".wow" ).addClass( "fadeInUp" );
Options
Use one of the custom attributes below to change the behavior of the animations on a scroll.
-
data-wow-duration
: Change the animation duration -
data-wow-delay
: Delay before the animation starts -
data-wow-offset
: Distance to start the animation (related to the browser bottom) -
data-wow-iteration
: Number of times the animation will be repeated
<img src="..." class="wow fadeInUp" data-wow-delay="0.6s">
Customize Settings
-
boxClass
: Class name that reveals the hidden box when user scrolls -
animateClass
: Class name that triggers the CSS animations -
offset
: Define the distance between the bottom of browser viewport and the top of the hidden box. When the user scrolls and reaches this distance, the hidden box is revealed. -
mobile
: Turn on/off animations on mobile devices. -
live
: constantly check for new animated elements on the page
wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
})
wow.init();