Animations

Bootstrap animations

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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

Transparent MDB Logo

Select an animation

Basic usage

Using our animations 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. .heartBeat
  13. .bounceIn
  14. .bounceInDown
  15. .bounceInLeft
  16. .bounceInRight
  17. .bounceInUp
  18. .bounceOut
  19. .bounceOutDown
  20. .bounceOutLeft
  21. .bounceOutRight
  22. .bounceOutUp
  23. .fadeIn
  24. .fadeInDown
  25. .fadeInDownBig
  26. .fadeInLeft
  27. .fadeInLeftBig
  28. .fadeInRight
  29. .fadeInRightBig
  30. .fadeInUp
  31. .fadeInUpBig
  32. .fadeOut
  33. .fadeOutDown
  34. .fadeOutDownBig
  35. .fadeOutLeft
  36. .fadeOutLeftBig
  37. .fadeOutRight
  38. .fadeOutRightBig
  39. .fadeOutUp
  40. .fadeOutUpBig
  41. .flipInX
  42. .flipInY
  43. .flipOutX
  44. .flipOutY
  45. .lightSpeedIn
  46. .lightSpeedOut
  47. .rotateIn
  48. .rotateInDownLeft
  49. .rotateInDownRight
  50. .rotateInUpLeft
  51. .rotateInUpRight
  52. .rotateOut
  53. .rotateOutDownLeft
  54. .rotateOutDownRight
  55. .rotateOutUpLeft
  56. .rotateOutUpRight
  57. .hinge
  58. .rollIn
  59. .rollOut
  60. .zoomIn
  61. .zoomInDown
  62. .zoomInLeft
  63. .zoomInRight
  64. .zoomInUp
  65. .zoomOut
  66. .zoomOutDown
  67. .zoomOutLeft
  68. .zoomOutRight
  69. .zoomOutUp
  70. .slideInDown
  71. .slideInLeft
  72. .slideInRight
  73. .slideInUp
  74. .slideOutDown
  75. .slideOutLeft
  76. .slideOutRight
  77. .slideOutUp

Live preview

Transparent MDB Logo
Edit in sandbox 
        
            
        <img src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.webp" class="animated bounce infinite" alt="Transparent MDB Logo" id="animated-img1">

Note: Do not add the "infinite" class if you do not want the animation to be looped.

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

Transparent MDB Logo

Select an option

Add one of the following classes:

  1. .fast
  2. .faster
  3. .slow
  4. .slower
  5. .delay-1s
  6. .delay-2s
  7. .delay-3s
  8. .delay-4s
  9. .delay-5s
  10. .infinite

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:

Edit in sandbox 
        
            
        $('#yourElement').addClass('animated bounceOutLeft');

2. You can also detect when an animation ends:

Edit in sandbox 
        
            
        $('#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:

Edit in sandbox 
        
            
        #yourElement {
          -vendor-animation-duration: 3s;
          -vendor-animation-delay: 2s;
          -vendor-animation-iteration-count: infinite;
        }

Note: be sure to replace "vendor" in the CSS code with the applicable vendor prefixes (webkit, moz, etc).

Reveal Animations When Scrolling

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

Sample image
Sample image
Sample image
Sample image
Sample image
Sample image

Basic usage

Step 1: Initialize the script for animations when scrolling.

Edit in sandbox 
        
            
        $( document ).ready(function() {
          new WOW().init();
        });

Step 2: Add the CSS class .wow to an HTML element: it will be invisible until the user scrolls to reveal it.

Edit in sandbox 
        
            
        <img src="..." class="wow">

Step 3: Pick an animation style from the list of animations , then add the CSS class to the HTML element.

Edit in sandbox 
        
            
        <img src="..." class="wow fadeInUp">

Adding multiple animations via jQuery

If you want to use the same animation throughout the entire page, you can use jQuery addClass() to make it once, then reuse it.

Edit in sandbox 
        
            
        $( ".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 has loaded.

Edit in sandbox 
        
            
        .wow {
          visibility: hidden;
        }

Options

Use one of the custom attributes below to change the behavior of the animations upon a scrolling.

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

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

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

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