Animations

Bootstrap 5 Animations

Subtle and smooth MDB animations provide the user with a unique experience when interacting with UI. There are several dozen animations at your disposal along with many customization and implementation options.

Bootstrap 5 animations imitate motions for web elements. +70 animations generated by CSS only, work on every browser.

Note: Read the API tab to find all available options and advanced customization

Required ES init: Animate *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.
MDB 5 - Bootstrap 5 & Material Design

Video tutorial

Move the mouse over the squares below to launch the animation.

fade-in
fade-in-down
fade-in-left
fade-in-right
fade-in-up
fade-out
fade-out-down
fade-out-left
fade-out-right
fade-out-up
slide-in-down
slide-in-left
slide-in-right
slide-in-up
slide-out-down
slide-out-left
slide-out-right
slide-out-up
slide-down
slide-left
slide-right
slide-up
zoom-in
zoom-out
tada
pulse

Basic example

The easiest way to implement the animation is to use data-mdb-attributes. In the example below, we use the icon <i class="fas fa-car-side fa-3x"></i> and add the attributes data-mdb-animation-init data-mdb-animation-reset="true" data-mdb-animation="slide-out-right" to give it animation on click.

data-mdb-animation-init is an obligatory attribute for each animation.

data-mdb-animation-reset="true" lets you decide if the animation can be repeated

data-mdb-animation="slide-right" lets you specify which animation apply to the element. In the demo section above you can find available animations.

Click the car to start the animation.

Edit in sandbox 
        
            
          <i
            data-mdb-animation-init
            data-mdb-animation-reset="true"
            data-mdb-animation="slide-right"
            class="fas fa-car-side fa-3x"
          ></i>
        
        
    
        
            
        // Initialization for ES Users
        import { Animate, initMDB } from "mdb-ui-kit";

        initMDB({ Animate });

Animation list

By default, you have access to the basic animations. However, you can also import _animate-extended.scss and compile extended animations.

Basic Animations

  • fade-in
  • fade-in-down
  • fade-in-left
  • fade-in-right
  • fade-in-up
  • fade-out
  • fade-out-down
  • fade-out-left
  • fade-out-right
  • fade-out-up
  • slide-in-down
  • slide-in-left
  • slide-in-right
  • slide-in-up
  • slide-out-down
  • slide-out-left
  • slide-out-right
  • slide-out-up
  • slide-down
  • slide-left
  • slide-right
  • slide-up
  • zoom-in
  • zoom-out
  • tada
  • pulse

Extended Animations

  • drop-in
  • drop-out
  • fly-in
  • fly-in-up
  • fly-in-down
  • fly-in-left
  • fly-in-right
  • fly-out
  • fly-out-up
  • fly-out-down
  • fly-out-left
  • fly-out-right
  • browse-in
  • browse-out
  • browse-out-left
  • browse-out-right
  • jiggle
  • flash
  • shake
  • glow

Launch options

There are several options for launching the animation.

On click

Animation on click is a default launching option, so it does not require any data-mdb-attribute.

Edit in sandbox 
        
            
            <i
              data-mdb-animation-init
              data-mdb-animation-reset="true"
              data-mdb-animation="slide-right"
              class="fas fa-car-side fa-3x"
            ></i>
          
        
    
        
            
          // Initialization for ES Users
          import { Animate, initMDB } from "mdb-ui-kit";

          initMDB({ Animate });

On hover

Use data-mdb-animation-start="onHover" to launch the animation on mouse hover.

Edit in sandbox 
        
            
            <i
              data-mdb-animation-init
              data-mdb-animation-start="onHover"
              data-mdb-animation-reset="true"
              data-mdb-animation="slide-right"
              class="fas fa-car-side fa-3x"
            ></i>
          
        
    
        
            
          // Initialization for ES Users
          import { Animate, initMDB } from "mdb-ui-kit";

          initMDB({ Animate });

On Load

Use data-mdb-animation-start="onLoad" to start the animation after loading the page. Refresh your browser to see this effect.

Edit in sandbox 
        
            
            <i
              data-mdb-animation-init
              data-mdb-animation="zoom-in"
              data-mdb-animation-start="onLoad"
              class="fas fa-car-side fa-3x"
            ></i>
          
        
    
        
            
          // Initialization for ES Users
          import { Animate, initMDB } from "mdb-ui-kit";

          initMDB({ Animate });

Manually

Use data-mdb-animation-start="manually" to initialize the component without animating, adding hover, clicking or scrolling events and use the animationStart method when you want to start the animation.

Edit in sandbox 
        
            
            <i
              data-mdb-animation-init
              data-mdb-animation="zoom-in"
              data-mdb-animation-start="onLoad"
              class="fas fa-car-side fa-3x"
            ></i>
          
        
    
        
            
          // Initialization for ES Users
          import { Animate, initMDB } from "mdb-ui-kit";

          initMDB({ Animate });

On scroll

Use data-mdb-animation-start="onScroll" to launch the animation when you scroll the page and reach the element.

Notice that the animation will launch only once - even if you reach it when scrolling multiple times.

Edit in sandbox 
        
            
            <i
              data-mdb-animation-init
              data-mdb-animation-start="onScroll"
              data-mdb-animation="slide-in-left"
              class="fas fa-car-side fa-3x"
            ></i>
          
        
    
        
            
          // Initialization for ES Users
          import { Animate, initMDB } from "mdb-ui-kit";

          initMDB({ Animate });

Repeat animation on scroll

If you want to launch the animation every time it's reached when scrolling use data-mdb-animation-on-scroll="repeat".

Edit in sandbox 
        
            
            <i
              data-mdb-animation-init
              data-mdb-animation-start="onScroll"
              data-mdb-animation-on-scroll="repeat"
              data-mdb-animation="slide-in-left"
              class="fas fa-car-side fa-3x"
            ></i>
          
        
    
        
            
          // Initialization for ES Users
          import { Animate, initMDB } from "mdb-ui-kit";

          initMDB({ Animate });

Show on load

If you use animation onScroll, by default all elements are visible when the page is loaded. They disappear and begin to animate after the first scroll. You can change this by setting data-mdb-animation-show-on-load="false". However, remember that this may have a negative impact on SEO.

Edit in sandbox 
        
            
            <i
              data-mdb-animation-init
              data-mdb-animation-start="onScroll"
              data-mdb-animation-on-scroll="repeat"
              data-mdb-animation-show-on-load="false"
              data-mdb-animation="slide-in-left"
              class="fas fa-car-side fa-3x invisible"
            ></i>
          
        
    
        
            
          // Initialization for ES Users
          import { Animate, initMDB } from "mdb-ui-kit";

          initMDB({ Animate });

Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

Edit in sandbox 
        
            
            <div class="d-flex justify-content-around">
              <div>
                <button
                  class="btn btn-primary me-5"
                  data-mdb-animation-init
                  data-mdb-animation-target="#animate-click"
                  data-mdb-ripple-init
                >
                  Animation on Click
                </button>
                <i
                  id="animate-click"
                  data-mdb-animation="slide-out-right"
                  data-mdb-animation-start="onClick"
                  data-mdb-animation-reset="true"
                  class="fas fa-car-side fa-3x"
                ></i>
              </div>
              <div>
                <button
                  class="btn btn-primary me-5"
                  data-mdb-animation-init
                  data-mdb-animation-target="#animate-hover"
                  data-mdb-ripple-init
                >
                  Animation on Hover
                </button>
                <i
                  id="animate-hover"
                  data-mdb-animation="slide-out-right"
                  data-mdb-animation-start="onHover"
                  data-mdb-animation-reset="true"
                  class="fas fa-car-side fa-3x"
                ></i>
              </div>
            </div>
          
        
    
        
            
          // Initialization for ES Users
          import { Animate, Ripple, initMDB } from "mdb-ui-kit";

          initMDB({ Animate, Ripple });

Start animation manually

You can use the animationStart and animationStop methods to start or stop the animation at the right moment

Edit in sandbox 
        
            
            <i id="manually-example" class="fas fa-car-side fa-3x"></i>
            <button id="manually-btn-start" data-mdb-ripple-init class="btn btn-primary ms-3">start</button>
            <button id="manually-btn-stop" data-mdb-ripple-init class="btn btn-primary ms-3">stop</button>
          
        
    
        
            
            import { Animate, Ripple, initMDB } from "mdb-ui-kit";

            initMDB({ Ripple });

            const manuallyEl = document.getElementById('manually-example');
            const manuallyBtnStart = document.getElementById('manually-btn-start');
            const manuallyBtnStop = document.getElementById('manually-btn-stop');
            const manually = new Animate(manuallyEl, { 
              animation: 'fade-in',
              animationStart: 'manually',
              animationRepeat: true,
            });
            manuallyBtnStart.addEventListener('click', () => {
             manually.startAnimation(); 
            });
            manuallyBtnStop.addEventListener('click', () => {
              manually.stopAnimation();
            });
          
        
    
        
            
          const manuallyEl = document.getElementById('manually-example');
            const manuallyBtnStart = document.getElementById('manually-btn-start');
            const manuallyBtnStop = document.getElementById('manually-btn-stop');
            const manually = new mdb.Animate(manuallyEl, { 
              animation: 'fade-in',
              animationStart: 'manually',
              animationRepeat: true,
            });
            manuallyBtnStart.addEventListener('click', () => {
             manually.startAnimation(); 
            });
            manuallyBtnStop.addEventListener('click', () => {
              manually.stopAnimation();
            });

Change animation type

You can change the element's animation type at any time using the changeAnimationType() method.

Edit in sandbox 
        
            
            <i id="change-animation-type-example" class="fas fa-car-side fa-3x"></i>
            <button id="change-animation-type-btn" data-mdb-ripple-init class="btn btn-primary ms-3">
              change animation
            </button>
          
        
    
        
            
            import { Animate, Ripple, initMDB } from "mdb-ui-kit";

            initMDB({ Ripple });

            const changeAnimationEl = document.getElementById('change-animation-type-example');
            const changeAnimationBtn = document.getElementById('change-animation-type-btn');
            let animation = 'zoom-in';
            const changeAnimation = new Animate(changeAnimationEl, {
              animation: animation, 
              animationStart: 'onLoad',
              animationDuration: 1000,
              animationRepeat: true,
            });
            
            changeAnimation.init();

            changeAnimationBtn.addEventListener('click', () => {
              if (animation === 'zoom-in') {
                animation = 'zoom-out'
              } else {
                animation = 'zoom-in'
              }
              changeAnimation.stopAnimation();
              changeAnimation.changeAnimationType(animation);
              changeAnimation.startAnimation();
            })
          
        
    
        
            
            const changeAnimationEl = document.getElementById('change-animation-type-example');
            const changeAnimationBtn = document.getElementById('change-animation-type-btn');
            let animation = 'zoom-in';
            const changeAnimation = new mdb.Animate(changeAnimationEl, {
              animation: animation, 
              animationStart: 'onLoad',
              animationDuration: 1000,
              animationRepeat: true,
            });
            
            changeAnimation.init();

            changeAnimationBtn.addEventListener('click', () => {
              if (animation === 'zoom-in') {
                animation = 'zoom-out'
              } else {
                animation = 'zoom-in'
              }
              changeAnimation.stopAnimation();
              changeAnimation.changeAnimationType(animation);
              changeAnimation.startAnimation();
            })

List group

Click "Add" button to add a new item to the list.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Edit in sandbox 
        
            
            <div class="d-flex">
              <div class="card" style="width: 18rem;">
                <ul id="example-list" class="list-group list-group-flush">
                  <li class="list-group-item bg-body-tertiary">Cras justo odio</li>
                  <li class="list-group-item bg-body-tertiary">Dapibus ac facilisis in</li>
                  <li class="list-group-item bg-body-tertiary">Vestibulum at eros</li>
                </ul>
              </div>
              <div class="ms-3">
                <button class="btn btn-primary" data-mdb-ripple-init id="add">add</button>
              </div>
            </div>
          
        
    
        
            
          import { Animate, Ripple, initMDB } from "mdb-ui-kit";

          initMDB({ Animate, Ripple });

          let elementNumber = 1;
            const bindRemoveClickEvent = (el) => {
              const element = el;

              element.addEventListener('click', () => {
                const prevElement = element.previousElementSibling ? element.previousElementSibling : element;
                const animation = element === prevElement ? 'fade-out' : 'slide-out-up';
                
                prevElement.style.zIndex = '1';

                element.addEventListener('animationend', () => {
                  element.remove();
                  prevElement.style.zIndex = '0';
                });

                element.classList.add('animation', 'faster', animation);
              });
            };

            const addNewOption = () => {
              const element = document.getElementById('example-list');
              const newElement = document.createElement('li');
              const lastElement = element.lastElementChild || element;
              const animation = element === lastElement ? 'fade-in' : 'slide-in-down';
              
              newElement.innerText = `element ${elementNumber}`;
              lastElement.style.zIndex = '1';
              newElement.classList.add('list-group-item', 'animation', 'faster', animation);
              
              newElement.addEventListener('animationend', () => {
                lastElement.style.zIndex = '0';
                newElement.classList.remove('animation', 'faster', animation);
              });

              bindRemoveClickEvent(newElement);
              element.appendChild(newElement);
              elementNumber += 1;
            };

            document.querySelectorAll('#example-list li').forEach((el) => {
              bindRemoveClickEvent(el);
            });
            
            document.getElementById('add').addEventListener('click', () => {
              addNewOption();
            });
          
        
    
        
            
            let elementNumber = 1;
            const bindRemoveClickEvent = (el) => {
              const element = el;

              element.addEventListener('click', () => {
                const prevElement = element.previousElementSibling ? element.previousElementSibling : element;
                const animation = element === prevElement ? 'fade-out' : 'slide-out-up';
                
                prevElement.style.zIndex = '1';

                element.addEventListener('animationend', () => {
                  element.remove();
                  prevElement.style.zIndex = '0';
                });

                element.classList.add('animation', 'faster', animation);
              });
            };

            const addNewOption = () => {
              const element = document.getElementById('example-list');
              const newElement = document.createElement('li');
              const lastElement = element.lastElementChild || element;
              const animation = element === lastElement ? 'fade-in' : 'slide-in-down';
              
              newElement.innerText = `element ${elementNumber}`;
              lastElement.style.zIndex = '1';
              newElement.classList.add('list-group-item', 'bg-body-tertiary', 'animation', 'faster', animation);
              
              newElement.addEventListener('animationend', () => {
                lastElement.style.zIndex = '0';
                newElement.classList.remove('animation', 'faster', animation);
              });

              bindRemoveClickEvent(newElement);
              element.appendChild(newElement);
              elementNumber += 1;
            };

            document.querySelectorAll('#example-list li').forEach((el) => {
              bindRemoveClickEvent(el);
            });
            
            document.getElementById('add').addEventListener('click', () => {
              addNewOption();
            });

Accordion

Click the collapsible group of the accordion to see the animation.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Edit in sandbox 
        
            
            <div class="accordion" id="accordionExample">
              <div class="card rounded-bottom-0">
                <div class="card-header" id="headingOne">
                  <h2 class="mb-0">
                    <button
                      class="btn btn-link btn-block text-start"
                      type="button"
                      data-mdb-collapse-init
                      data-mdb-target="#collapseOne"
                      data-mdb-animation-target="#collapseOne"
                      aria-expanded="true"
                      aria-controls="collapseOne"
                    >
                      Collapsible Group Item #1
                    </button>
                  </h2>
                </div>
                <div
                  id="collapseOne"
                  class="collapse show"
                  aria-labelledby="headingOne"
                  data-mdb-parent="#accordionExample"
                >
                  <div class="card-body">...</div>
                </div>
              </div>
              <div class="card rounded-0">
                <div class="card-header" id="headingTwo">
                  <h2 class="mb-0">
                    <button
                      class="btn btn-link btn-block text-start collapsed"
                      type="button"
                      data-mdb-collapse-init
                      data-mdb-target="#collapseTwo"
                      data-mdb-animation-target="#collapseTwo"
                      aria-expanded="false"
                      aria-controls="collapseTwo"
                    >
                      Collapsible Group Item #2
                    </button>
                  </h2>
                </div>
                <div
                  id="collapseTwo"
                  class="collapse"
                  aria-labelledby="headingTwo"
                  data-mdb-parent="#accordionExample"
                >
                  <div class="card-body">...</div>
                </div>
              </div>
              <div class="card rounded-top-0 overflow-hidden">
                <div class="card-header" id="headingThree">
                  <h2 class="mb-0">
                    <button
                      class="btn btn-link btn-block text-start collapsed"
                      type="button"
                      data-mdb-collapse-init
                      data-mdb-target="#collapseThree"
                      data-mdb-animation-target="#collapseThree"
                      aria-expanded="false"
                      aria-controls="collapseThree"
                    >
                      Collapsible Group Item #3
                    </button>
                  </h2>
                </div>
                <div
                  id="collapseThree"
                  class="collapse"
                  aria-labelledby="headingThree"
                  data-mdb-parent="#accordionExample"
                >
                  <div class="card-body">...</div>
                </div>
              </div>
            </div>
          
        
    
        
            
            import { Animate, Collapse, initMDB } from "mdb-ui-kit";

            initMDB({ Collapse });

            document.querySelectorAll('button[data-mdb-collapse-init]').forEach((el) => {
              const animate = new Animate(el, {
                animation: 'fade-in-up',
                delay: '500',
                duration: '500',
              });
              animate.init();
            });
          
        
    
        
            
            document.querySelectorAll('button[data-mdb-collapse-init]').forEach((el) => {
              const animate = new mdb.Animate(el, {
                animation: 'fade-in-up',
                delay: '500',
                duration: '500',
              });
              animate.init();
            });

Animations - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
        
            
          import { Animate, initMDB } from "mdb-ui-kit";
          
          initMDB({ Animate });
        
        
    
        
            
          import "mdb-ui-kit"

Usage

Via CSS class

Edit in sandbox 
        
            
          <i class="fas fa-car-side fa-3x animation slide-out-right"></i>

Via data attributes

Using the animation component doesn't require any additional JavaScript code - simply add data-mdb-animation-init attribute to element you want to use animation on and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Edit in sandbox 
        
            
          <i
            data-mdb-animation-init
            data-mdb-animation="tada"
            data-mdb-animation-start="onLoad"
            class="fas fa-star fa-3x"
          ></i>

Via JavaScript

JavaScript with CSS classes:
Note: After JS initializes the animation, the classes responsible for animations will not work.

Edit in sandbox 
        
            
        const element = document.getElementById('example');
        const animate = new Animate(element, { animation: 'tada'});
        animate.init();
        
        
    
        
            
        const element = document.getElementById('example');
        const animate = new mdb.Animate(element, { animation: 'tada'});
        animate.init();

Via data jQuery

Edit in sandbox 
        
            
          $('#example').animation({ animation: 'tada' });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-animation-start="".

Name Type Default Description
animation String 'fade' Changes animation
animationStart String 'onClick' Set how to run the animation (onClick, onLoad, onScroll, onHover, manually)
animationReset Boolean false Set to reset the animation after it finishes
animationShowOnLoad Boolean true Set false to start the scrolling animation immediately after the page loads. NOTE: this will hide elements that are not currently visible on the screen and this may have a negative impact on SEO
animationOnScroll String 'once' Set repeat to start the animation each time the item appears on the screen
onStart Function | null null Callback function fires after start animation
onEnd Function | null null Callback function fires after end animation
onHide Function | null null Callback function fires after show element
onShow Function | null null Callback function fires after hide element
animationOffset Number | String 0 Set offset for animate on scroll
animationDelay Number | String 0 Set animation delay
animationDuration Number | String 500 Set animation duration
animationReverse Boolean false Set true to played animation forwards first, then backwards
animationInterval Number | String 0 Set the time interval between animations
animationRepeat Boolean | Number false Set animation repeat - set true to repeat infinity or enter the number of times the animation should repeat

Methods

Name Description Example
dispose Destroy animations with this method animation.dispose()
init For dynamically added components or those without auto-initialization attribute using this method is additional step necessary to ensure they function correctly. animation.init()
getInstance Static method which allows you to get the animation instance associated to a DOM element. Animate.getInstance(animateEl)
getOrCreateInstance Static method which returns the animation instance associated to a DOM element or create a new one in case it wasn't initialized. Animate.getOrCreateInstance(animateEl)
startAnimation Start animating the element animation.startAnimation()
stopAnimation Stop animating the element animation.stopAnimation()
changeAnimationType Change the animation type of an element animation.changeAnimationType()
Edit in sandbox 
        
            
        const animateEl = document.getElementById('animate');
        const animate  = new Animate(manuallyEl, {
          animation: 'fade-in',
          animationStart: 'manually',
        });
        animate.startAnimation();
      
        
    
        
            
      const animateEl = document.getElementById('animate');
      const animate  = new mdb.Animate(manuallyEl, {
        animation: 'fade-in',
        animationStart: 'manually',
      });
      animate.startAnimation();

Customize animation via CSS class

Name Description
infinite Set infinite animation
delay-1s Set animation delay to delay-1s
delay-2s Set animation delay to delay-2s
delay-3s Set animation delay to delay-3s
delay-4s Set animation delay to delay-4s
delay-5s Set animation delay to delay-5s
fast Set animation duration to 800ms
faster Set animation duration to 500ms
slow Set animation duration to 2s
slower Set animation duration to 3s

Callbacks

Name Description
onStart This callback fires before the animation starts.
onEnd This callback starts immediately after the animation has finished.
onShow If you use animate on scroll this callback will start when the element appears on the screen.
onHide If you use animate on scroll this callback will start after the element disappears from the screen.
Edit in sandbox 
        
            
        const animateEl = document.getElementById('animate');
        const animate  = new mdb.Animate(manuallyEl, {
          animation: 'fade-in',
          onStart: () => {
            // do something.
          }
        });
        animate.init();

CSS variables

As part of MDB’s evolving CSS variables approach, animations now uses local CSS variables on .animation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Edit in sandbox 
        
            
          // .animation
          --#{$prefix}animation-delay-1s: #{$animation-delay-1s};
          --#{$prefix}animation-delay-2s: #{$animation-delay-3s};
          --#{$prefix}animation-delay-3s: #{$animation-delay-3s};
          --#{$prefix}animation-delay-4s: #{$animation-delay-4s};
          --#{$prefix}animation-delay-5s: #{$animation-delay-5s};
          --#{$prefix}animation-fast-duration: #{$animation-fast-duration};
          --#{$prefix}animation-faster-duration: #{$animation-faster-duration};
          --#{$prefix}animation-slow-duration: #{$animation-slow-duration};
          --#{$prefix}animation-slower-duration: #{$animation-slower-duration};

          // .fade-in-down {
          --#{$prefix}animation-fade-in-down-transform-from: #{$animation-fade-in-down-transform-from};
          --#{$prefix}animation-fade-in-down-transform-to: #{$animation-fade-in-down-transform-to};

          // .fade-in-left 
          --#{$prefix}animation-fade-in-left-transform-from: #{$animation-fade-in-left-transform-from};
          --#{$prefix}animation-fade-in-left-transform-to: #{$animation-fade-in-left-transform-to};

          // .fade-in-right 
          --#{$prefix}animation-fade-in-right-transform-from: #{$animation-fade-in-right-transform-from};
          --#{$prefix}animation-fade-in-right-transform-to: #{$animation-fade-in-right-transform-to};

          // .fade-in-up 
          --#{$prefix}animation-fade-in-up-transform-from: #{$animation-fade-in-up-transform-from};
          --#{$prefix}animation-fade-in-up-transform-to: #{$animation-fade-in-up-transform-to};

          // .fade-out-down 
          --#{$prefix}animation-fade-out-down-transform-to: #{$animation-fade-out-down-transform-to};

          // .fade-out-left 
          --#{$prefix}animation-fade-out-left-transform-to: #{$animation-fade-out-left-transform-to};

          // .fade-out-right 
          --#{$prefix}animation-fade-out-right-transform-to: #{$animation-fade-out-right-transform-to};

          // .fade-out-up 
          --#{$prefix}animation-fade-out-up-transform-to: #{$animation-fade-out-up-transform-to};

          // .slide-in-down 
          --#{$prefix}animation-slide-in-down-transform-from: #{$animation-slide-in-down-transform-from};
          --#{$prefix}animation-slide-in-down-transform-to: #{$animation-slide-in-down-transform-to};

          // .slide-in-left 
          --#{$prefix}animation-slide-in-left-transform-from: #{$animation-slide-in-left-transform-from};
          --#{$prefix}animation-slide-in-left-transform-to: #{$animation-slide-in-left-transform-to};

          // .slide-in-right 
          --#{$prefix}animation-slide-in-right-transform-from: #{$animation-slide-in-right-transform-from};
          --#{$prefix}animation-slide-in-right-transform-to: #{$animation-slide-in-right-transform-to};

          // .slide-in-up 
          --#{$prefix}animation-slide-in-up-transform-from: #{$animation-slide-in-up-transform-from};
          --#{$prefix}animation-slide-in-up-transform-to: #{$animation-slide-in-up-transform-to};

          // .slide-out-down 
          --#{$prefix}animation-slide-out-down-transform-from: #{$animation-slide-out-down-transform-from};
          --#{$prefix}animation-slide-out-down-transform-to: #{$animation-slide-out-down-transform-to};

          // .slide-out-left 
          --#{$prefix}animation-slide-out-left-transform-from: #{$animation-slide-out-left-transform-from};
          --#{$prefix}animation-slide-out-left-transform-to: #{$animation-slide-out-left-transform-to};
        
          // .slide-out-right 
          --#{$prefix}animation-slide-out-right-transform-from: #{$animation-slide-out-right-transform-from};
          --#{$prefix}animation-slide-out-right-transform-to: #{$animation-slide-out-right-transform-to};
        
          // .slide-out-up 
          --#{$prefix}animation-slide-out-up-transform-from: #{$animation-slide-out-up-transform-from};
          --#{$prefix}animation-slide-out-up-transform-to: #{$animation-slide-out-up-transform-to};

          // .slide-down 
          --#{$prefix}animation-slide-down-transform-from: #{$animation-slide-down-transform-from};
          --#{$prefix}animation-slide-down-transform-to: #{$animation-slide-down-transform-to};

          // .slide-left 
          --#{$prefix}animation-slide-left-transform-from: #{$animation-slide-left-transform-from};
          --#{$prefix}animation-slide-left-transform-to: #{$animation-slide-left-transform-to};

          // .slide-right 
          --#{$prefix}animation-slide-right-transform-from: #{$animation-slide-right-transform-from};
          --#{$prefix}animation-slide-right-transform-to: #{$animation-slide-right-transform-to};

          // .slide-up 
          --#{$prefix}animation-slide-up-transform-from: #{$animation-slide-up-transform-from};
          --#{$prefix}animation-slide-up-transform-to: #{$animation-slide-up-transform-to};

          // .zoom-in 
          --#{$prefix}animation-zoom-in-transform-from: #{$animation-zoom-in-transform-from};

          // .zoom-out 
          --#{$prefix}animation-zoom-out-transform-50: #{$animation-zoom-out-transform-50};

          // .tada 
          --#{$prefix}animation-tada-transform-from: #{$animation-tada-transform-from};
          --#{$prefix}animation-tada-transform-20: #{$animation-tada-transform-20};
          --#{$prefix}animation-tada-transform-90: #{$animation-tada-transform-90};
          --#{$prefix}animation-tada-transform-80: #{$animation-tada-transform-80};
          --#{$prefix}animation-tada-transform-to: #{$animation-tada-transform-to};

          // .pulse 
          --#{$prefix}animation-pulse-transform-from: #{$animation-pulse-transform-from};
          --#{$prefix}animation-pulse-transform-50: #{$animation-pulse-transform-50};
          --#{$prefix}animation-pulse-transform-to: #{$animation-pulse-transform-to};

          // .drop-in 
          --#{$prefix}animation-drop-in-transform-0: #{$animation-drop-in-transform-0};
          --#{$prefix}animation-drop-in-transform-100: #{$animation-drop-in-transform-100};
          --#{$prefix}animation-drop-in-timing-function: #{$animation-drop-in-timing-function};
        
          // .drop-out 
          --#{$prefix}animation-drop-out-transform-0: #{$animation-drop-out-transform-0};
          --#{$prefix}animation-drop-out-transform-100: #{$animation-drop-out-transform-100};
          --#{$prefix}animation-drop-out-timing-function: #{$animation-drop-out-timing-function};

          // .fly-in 
          --#{$prefix}animation-fly-in-transform-0: #{$animation-fly-in-transform-0};
          --#{$prefix}animation-fly-in-transform-20: #{$animation-fly-in-transform-20};
          --#{$prefix}animation-fly-in-transform-40: #{$animation-fly-in-transform-40};
          --#{$prefix}animation-fly-in-transform-60: #{$animation-fly-in-transform-60};
          --#{$prefix}animation-fly-in-transform-80: #{$animation-fly-in-transform-80};
          --#{$prefix}animation-fly-in-transform-100: #{$animation-fly-in-transform-100};
          --#{$prefix}animation-fly-in-timing-function: #{$animation-fly-in-timing-function};

          // .fly-in-up 
          --#{$prefix}animation-fly-in-up-transform-0: #{$animation-fly-in-up-transform-0};
          --#{$prefix}animation-fly-in-up-transform-60: #{$animation-fly-in-up-transform-60};
          --#{$prefix}animation-fly-in-up-transform-75: #{$animation-fly-in-up-transform-75};
          --#{$prefix}animation-fly-in-up-transform-90: #{$animation-fly-in-up-transform-90};
          --#{$prefix}animation-fly-in-up-transform-100: #{$animation-fly-in-up-transform-100};
          --#{$prefix}animation-fly-in-up-timing-function: #{$animation-fly-in-up-timing-function};
        
          // .fly-in-down 
          --#{$prefix}animation-fly-in-down-transform-0: #{$animation-fly-in-down-transform-0};
          --#{$prefix}animation-fly-in-down-transform-60: #{$animation-fly-in-down-transform-60};
          --#{$prefix}animation-fly-in-down-transform-75: #{$animation-fly-in-down-transform-75};
          --#{$prefix}animation-fly-in-down-transform-90: #{$animation-fly-in-down-transform-90};
          --#{$prefix}animation-fly-in-down-timing-function: #{$animation-fly-in-down-timing-function};

          // .fly-in-left 
          --#{$prefix}animation-fly-in-left-transform-0: #{$animation-fly-in-left-transform-0};
          --#{$prefix}animation-fly-in-left-transform-60: #{$animation-fly-in-left-transform-60};
          --#{$prefix}animation-fly-in-left-transform-75: #{$animation-fly-in-left-transform-75};
          --#{$prefix}animation-fly-in-left-transform-90: #{$animation-fly-in-left-transform-90};
          --#{$prefix}animation-fly-in-left-timing-function: #{$animation-fly-in-left-timing-function};

          // .fly-in-right 
          --#{$prefix}animation-fly-in-right-transform-0: #{$animation-fly-in-right-transform-0};
          --#{$prefix}animation-fly-in-right-transform-60: #{$animation-fly-in-right-transform-60};
          --#{$prefix}animation-fly-in-right-transform-75: #{$animation-fly-in-right-transform-75};
          --#{$prefix}animation-fly-in-right-transform-90: #{$animation-fly-in-right-transform-90};
          --#{$prefix}animation-fly-in-right-timing-function: #{$animation-fly-in-right-timing-function};

          // .fly-out 
          --#{$prefix}animation-fly-out-transform-20: #{$animation-fly-out-transform-20};
          --#{$prefix}animation-fly-out-transform-55: #{$animation-fly-out-transform-55};
          --#{$prefix}animation-fly-out-transform-100: #{$animation-fly-out-transform-100};
          --#{$prefix}animation-fly-out-timing-function: #{$animation-fly-out-timing-function};

          // .fly-out-up 
          --#{$prefix}animation-fly-out-up-transform-20: #{$animation-fly-out-up-transform-20};
          --#{$prefix}animation-fly-out-up-transform-45: #{$animation-fly-out-up-transform-45};
          --#{$prefix}animation-fly-out-up-transform-100: #{$animation-fly-out-up-transform-100};
          --#{$prefix}animation-fly-out-up-timing-function: #{$animation-fly-out-up-timing-function};
        
          // .fly-out-down
          --#{$prefix}animation-fly-out-down-transform-20: #{$animation-fly-out-down-transform-20};
          --#{$prefix}animation-fly-out-down-transform-45: #{$animation-fly-out-down-transform-45};
          --#{$prefix}animation-fly-out-down-transform-100: #{$animation-fly-out-down-transform-100};
          --#{$prefix}animation-fly-out-down-timing-function: #{$animation-fly-out-down-timing-function};

          // .fly-out-left 
          --#{$prefix}animation-fly-out-left-transform-20: #{$animation-fly-out-left-transform-20};
          --#{$prefix}animation-fly-out-left-transform-100: #{$animation-fly-out-left-transform-100};
          --#{$prefix}animation-fly-out-left-timing-function: #{$animation-fly-out-left-timing-function};

          // .fly-out-right 
          --#{$prefix}animation-fly-out-right-transform-20: #{$animation-fly-out-right-transform-20};
          --#{$prefix}animation-fly-out-right-transform-100: #{$animation-fly-out-right-transform-100};
          --#{$prefix}animation-fly-out-right-timing-function: #{$animation-fly-out-right-timing-function};

          // .browse-in 
          --#{$prefix}animation-browse-in-transform-0: #{$animation-browse-in-transform-0};
          --#{$prefix}animation-browse-in-transform-10: #{$animation-browse-in-transform-10};
          --#{$prefix}animation-browse-in-transform-80: #{$animation-browse-in-transform-80};
          --#{$prefix}animation-browse-in-transform-100: #{$animation-browse-in-transform-100};

          // .browse-out, .browse-out-left
          --#{$prefix}animation-browse-out-left-transform-0: #{$animation-browse-out-left-transform-0};
          --#{$prefix}animation-browse-out-left-transform-50: #{$animation-browse-out-left-transform-50};
          --#{$prefix}animation-browse-out-left-transform-100: #{$animation-browse-out-left-transform-100};

          // .browse-out-right 
          --#{$prefix}animation-browse-out-right-transform-0: #{$animation-browse-out-right-transform-0};
          --#{$prefix}animation-browse-out-right-transform-50: #{$animation-browse-out-right-transform-50};
          --#{$prefix}animation-browse-out-right-transform-100: #{$animation-browse-out-right-transform-100};

          // .jiggle 
          --#{$prefix}animation-jiggle-transform-0: #{$animation-jiggle-transform-0};
          --#{$prefix}animation-jiggle-transform-30: #{$animation-jiggle-transform-30};
          --#{$prefix}animation-jiggle-transform-40: #{$animation-jiggle-transform-40};
          --#{$prefix}animation-jiggle-transform-50: #{$animation-jiggle-transform-50};
          --#{$prefix}animation-jiggle-transform-65: #{$animation-jiggle-transform-65};
          --#{$prefix}animation-jiggle-transform-75: #{$animation-jiggle-transform-75};
          --#{$prefix}animation-jiggle-transform-100: #{$animation-jiggle-transform-100};

          // .shake 
          --#{$prefix}animation-shake-transform-100: #{$animation-shake-transform-100};
          --#{$prefix}animation-shake-transform-90: #{$animation-shake-transform-90};
          --#{$prefix}animation-shake-transform-80: #{$animation-shake-transform-80};

          // .glow 
          --#{$prefix}animation-glow-bg-0: #{$animation-glow-bg-0};
          --#{$prefix}animation-glow-bg-30: #{$animation-glow-bg-30};
          --#{$prefix}animation-glow-bg-100: #{$animation-glow-bg-100};

SCSS variables

Edit in sandbox 
        
            
          $animation-delay-1s: 1s;
          $animation-delay-2s: 2s;
          $animation-delay-3s: 3s;
          $animation-delay-4s: 4s;
          $animation-delay-5s: 5s;
          $animation-fast-duration: 800ms;
          $animation-faster-duration: 500ms;
          $animation-slow-duration: 2s;
          $animation-slower-duration: 3s;
          
          $animation-fade-in-down-transform-from: translate3d(0, -100%, 0);
          $animation-fade-in-down-transform-to: translate3d(0, 0, 0);

          $animation-fade-in-left-transform-from: translate3d(-100%, 0, 0);
          $animation-fade-in-left-transform-to: translate3d(0, 0, 0);

          $animation-fade-in-right-transform-from: translate3d(100%, 0, 0);
          $animation-fade-in-right-transform-to: translate3d(0, 0, 0);

          $animation-fade-in-up-transform-from: translate3d(0, 100%, 0);
          $animation-fade-in-up-transform-to: translate3d(0, 0, 0);

          $animation-fade-out-down-transform-to: translate3d(0, 100%, 0);

          $animation-fade-out-left-transform-to: translate3d(-100%, 0, 0);

          $animation-fade-out-right-transform-to: translate3d(100%, 0, 0);

          $animation-fade-out-up-transform-to: translate3d(0, -100%, 0);

          $animation-slide-in-down-transform-from: translate3d(0, -100%, 0);
          $animation-slide-in-down-transform-to: translate3d(0, 0, 0);

          $animation-slide-in-left-transform-from: translate3d(-100%, 0, 0);
          $animation-slide-in-left-transform-to: translate3d(0, 0, 0);

          $animation-slide-in-right-transform-from: translate3d(100%, 0, 0);
          $animation-slide-in-right-transform-to: translate3d(0, 0, 0);

          $animation-slide-in-up-transform-from: translate3d(0, 100%, 0);
          $animation-slide-in-up-transform-to: translate3d(0, 0, 0);

          $animation-slide-out-down-transform-from: translate3d(0, 0, 0);
          $animation-slide-out-down-transform-to: translate3d(0, 100%, 0);

          $animation-slide-out-left-transform-from: translate3d(0, 0, 0);
          $animation-slide-out-left-transform-to: translate3d(-100%, 0, 0);

          $animation-slide-out-right-transform-from: translate3d(0, 0, 0);
          $animation-slide-out-right-transform-to: translate3d(100%, 0, 0);

          $animation-slide-out-up-transform-from: translate3d(0, 0, 0);
          $animation-slide-out-up-transform-to: translate3d(0, -100%, 0);

          $animation-slide-down-transform-from: translate3d(0, 0, 0);
          $animation-slide-down-transform-to: translate3d(0, 100%, 0);

          $animation-slide-left-transform-from: translate3d(0, 0, 0);
          $animation-slide-left-transform-to: translate3d(-100%, 0, 0);

          $animation-slide-right-transform-from: translate3d(0, 0, 0);
          $animation-slide-right-transform-to: translate3d(100%, 0, 0);

          $animation-slide-up-transform-from: translate3d(0, 0, 0);
          $animation-slide-up-transform-to: translate3d(0, -100%, 0);

          $animation-zoom-in-transform-from: scale3d(0.3, 0.3, 0.3);

          $animation-zoom-out-transform-50: scale3d(0.3, 0.3, 0.3);

          $animation-tada-transform-from: scale3d(1, 1, 1);
          $animation-tada-transform-20: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
          $animation-tada-transform-90: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
          $animation-tada-transform-80: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
          $animation-tada-transform-to: scale3d(1, 1, 1);

          $animation-pulse-transform-from: scale3d(1, 1, 1);
          $animation-pulse-transform-50: scale3d(1.05, 1.05, 1.05);
          $animation-pulse-transform-to: scale3d(1, 1, 1);

          // Animations extended

          $animation-drop-in-transform-0: scale(0);
          $animation-drop-in-transform-100: scale(1);
          $animation-drop-in-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);

          $animation-drop-out-transform-0: scale(1);
          $animation-drop-out-transform-100: scale(0);
          $animation-drop-out-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);

          $animation-fly-in-transform-0: scale3d(0.3, 0.3, 0.3);
          $animation-fly-in-transform-20: scale3d(1.1, 1.1, 1.1);
          $animation-fly-in-transform-40: scale3d(0.9, 0.9, 0.9);
          $animation-fly-in-transform-60: scale3d(1.03, 1.03, 1.03);
          $animation-fly-in-transform-80: scale3d(0.97, 0.97, 0.97);
          $animation-fly-in-transform-100: scale3d(1, 1, 1);
          $animation-fly-in-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-in-up-transform-0: translate3d(0, 1500px, 0);
          $animation-fly-in-up-transform-60: translate3d(0, -20px, 0);
          $animation-fly-in-up-transform-75: translate3d(0, 10px, 0);
          $animation-fly-in-up-transform-90: translate3d(0, -5px, 0);
          $animation-fly-in-up-transform-100: translate3d(0, 0, 0);
          $animation-fly-in-up-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-in-down-transform-0: translate3d(0, -1500px, 0);
          $animation-fly-in-down-transform-60: translate3d(0, 25px, 0);
          $animation-fly-in-down-transform-75: translate3d(0, -10px, 0);
          $animation-fly-in-down-transform-90: translate3d(0, 5px, 0);
          $animation-fly-in-down-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-in-left-transform-0: translate3d(1500px, 0, 0);
          $animation-fly-in-left-transform-60: translate3d(-25px, 0, 0);
          $animation-fly-in-left-transform-75: translate3d(10px, 0, 0);
          $animation-fly-in-left-transform-90: translate3d(-5px, 0, 0);
          $animation-fly-in-left-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-in-right-transform-0: translate3d(-1500px, 0, 0);
          $animation-fly-in-right-transform-60: translate3d(25px, 0, 0);
          $animation-fly-in-right-transform-75: translate3d(-10px, 0, 0);
          $animation-fly-in-right-transform-90: translate3d(5px, 0, 0);
          $animation-fly-in-right-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-out-transform-20: scale3d(0.9, 0.9, 0.9);
          $animation-fly-out-transform-55: scale3d(1.1, 1.1, 1.1);
          $animation-fly-out-transform-100: scale3d(0.3, 0.3, 0.3);
          $animation-fly-out-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-out-up-transform-20: translate3d(0, 10px, 0);
          $animation-fly-out-up-transform-45: translate3d(0, -20px, 0);
          $animation-fly-out-up-transform-100: translate3d(0, 2000px, 0);
          $animation-fly-out-up-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-out-down-transform-20: translate3d(0, -10px, 0);
          $animation-fly-out-down-transform-45: translate3d(0, 20px, 0);
          $animation-fly-out-down-transform-100: translate3d(0, -2000px, 0);
          $animation-fly-out-down-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-out-left-transform-20: translate3d(-20px, 0, 0);
          $animation-fly-out-left-transform-100: translate3d(2000px, 0, 0);
          $animation-fly-out-left-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-fly-out-right-transform-20: translate3d(20px, 0, 0);
          $animation-fly-out-right-transform-100: translate3d(-2000px, 0, 0);
          $animation-fly-out-right-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

          $animation-browse-in-transform-0: scale(0.8) translateZ(0px);
          $animation-browse-in-transform-10: scale(0.8) translateZ(0px);
          $animation-browse-in-transform-80: scale(1.05) translateZ(0px);
          $animation-browse-in-transform-100: scale(1) translateZ(0px);

          $animation-browse-out-left-transform-0: translateX(0%) rotateY(0deg) rotateX(0deg);
          $animation-browse-out-left-transform-50: translateX(-105%) rotateY(35deg) rotateX(10deg)
            translateZ(-10px);
          $animation-browse-out-left-transform-100: translateX(0%) rotateY(0deg) rotateX(0deg)
            translateZ(-10px);

          $animation-browse-out-right-transform-0: translateX(0%) rotateY(0deg) rotateX(0deg);
          $animation-browse-out-right-transform-50: translateX(105%) rotateY(35deg) rotateX(10deg)
            translateZ(-10px);
          $animation-browse-out-right-transform-100: translateX(0%) rotateY(0deg) rotateX(0deg)
            translateZ(-10px);

          $animation-jiggle-transform-0: scale3d(1, 1, 1);
          $animation-jiggle-transform-30: scale3d(1.25, 0.75, 1);
          $animation-jiggle-transform-40: scale3d(0.75, 1.25, 1);
          $animation-jiggle-transform-50: scale3d(1.15, 0.85, 1);
          $animation-jiggle-transform-65: scale3d(0.95, 1.05, 1);
          $animation-jiggle-transform-75: scale3d(1.05, 0.95, 1);
          $animation-jiggle-transform-100: scale3d(1, 1, 1);

          $animation-flash-duration: 750ms;

          $animation-shake-transform-100: translateX(0);
          $animation-shake-transform-90: translateX(-10px);
          $animation-shake-transform-80: translateX(10px);

          $animation-glow-bg-0: #fcfcfd;
          $animation-glow-bg-30: #fff6cd;
          $animation-glow-bg-100: #fcfcfd;