Bootstrap animations

Bootstrap animations are illusions of motions for web elements. +70 animations generated by CSS only, work properly on every browser.

Transparent MDB Logo

Select an animation


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:

  1. .bounce
  2. .flash
  3. .pulse
  4. .rubberBand
  5. .shake
  6. .headShake
  7. .swing
  8. .tada
  9. .wobble
  10. .jello
  11. .jackInTheBox
  12. .bounceIn
  13. .bounceInDown
  14. .bounceInLeft
  15. .bounceInRight
  16. .bounceInUp
  17. .bounceOut
  18. .bounceOutDown
  19. .bounceOutLeft
  20. .bounceOutRight
  21. .bounceOutUp
  22. .fadeIn
  23. .fadeInDown
  24. .fadeInDownBig
  25. .fadeInLeft
  26. .fadeInLeftBig
  27. .fadeInRight
  28. .fadeInRightBig
  29. .fadeInUp
  30. .fadeInUpBig
  31. .fadeOut
  32. .fadeOutDown
  33. .fadeOutDownBig
  34. .fadeOutLeft
  35. .fadeOutLeftBig
  36. .fadeOutRight
  37. .fadeOutRightBig
  38. .fadeOutUp
  39. .fadeOutUpBig
  40. .flipInX
  41. .flipInY
  42. .flipOutX
  43. .flipOutY
  44. .lightSpeedIn
  45. .lightSpeedOut
  46. .rotateIn
  47. .rotateInDownLeft
  48. .rotateInDownRight
  49. .rotateInUpLeft
  50. .rotateInUpRight
  51. .rotateOut
  52. .rotateOutDownLeft
  53. .rotateOutDownRight
  54. .rotateOutUpLeft
  55. .rotateOutUpRight
  56. .hinge
  57. .rollIn
  58. .rollOut
  59. .zoomIn
  60. .zoomInDown
  61. .zoomInLeft
  62. .zoomInRight
  63. .zoomInUp
  64. .zoomOut
  65. .zoomOutDown
  66. .zoomOutLeft
  67. .zoomOutRight
  68. .zoomOutUp
  69. .slideInDown
  70. .slideInLeft
  71. .slideInRight
  72. .slideInUp
  73. .slideOutDown
  74. .slideOutLeft
  75. .slideOutRight
  76. .slideOutUp

Step 3 (additionally): You may also want to include the class infinite for an infinite loop.

Transparent MDB Logo
                

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

1. Dynamically add animations using jQuery with ease:


        $('#yourElement').addClass('animated bounceOutLeft');
        

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


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

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

A view on mountains.
Cottage on a lake surrounded by mountains.
Cyclist riding down the mountain path.
View on mountains from mountain top.
Rocky shore in the morning.
Rocky shore in the morning.

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" );
                
            

visibility: hidden;

Add visibility: hidden to the wow if you want to animate the element which is visible immediately after page load. Thanks to that you avoid reloading the content after javascript load.

                        
.wow {
    visibility: hidden;
}
                        
                    

Options

Use one of the custom attributes below to change the behavior of the animations on a scroll.

  1. data-wow-duration: Change the animation duration

  2. data-wow-delay: Delay before the animation starts

  3. data-wow-offset: Distance to start the animation (related to the browser bottom)

  4. data-wow-iteration: Number of times the animation will be repeated

                
<img src="..." class="wow fadeInUp" data-wow-delay="0.6s">
                
            

Customize Settings

  1. boxClass: Class name that reveals the hidden box when user scrolls

  2. animateClass: Class name that triggers the CSS animations

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

  4. mobile: Turn on/off animations on mobile devices.

  5. 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();