Animations

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

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

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 wrap element you want to animate with MDBAnimation component. In the example below, we use the icon <MDBIcon icon="car-side" size="3x"/> and MDBAnimation properties reset animation="slide-right" to give it animation on click.

animation is an obligatory property to create animation for component

reset property lets you decide if the animation can be repeated

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.

<template>
  <MDBAnimation reset animation="slide-right">
    <MDBIcon icon="car-side" size="3x"></MDBIcon>
  </MDBAnimation>
</template>
<script>
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</script>

Animation list

By default, you have access to the basic animations. However, you can also import _animate-extended.scsscode> 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-dDown
  • 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 property. 

<template>
  <MDBAnimation reset animation="slide-right">
    <MDBIcon icon="car-side" size="3x"></MDBIcon>
  </MDBAnimation>
</template>
<script>
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</script>

On hover

Use trigger="onHover" to launch the animation on mouse hover.

<template>
  <MDBAnimation trigger="onHover" reset animation="slide-right">
    <MDBIcon icon="car-side" size="3x"></MDBIcon>
  </MDBAnimation>
</template>
<script>
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</script>

On Load

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

<template>
  <MDBAnimation trigger="onLoad" reset animation="slide-right">
    <MDBIcon icon="car-side" size="3x"></MDBIcon>
  </MDBAnimation>
</template>
<script>
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</script>

Manually

Use trigger="manually" to initialize the component without animating, adding hover, clicking or scrolling events. To run the animation use the startAnimation method or pass truthy value to v-model property. 

<template>
  <MDBAnimation trigger="manually" reset animation="slide-right" ref="manual">
    <MDBIcon icon="car-side" size="3x"></MDBIcon>
  </MDBAnimation>
  <MDBBtn
    style="width: 200px"
    color="primary"
    @click="manual?.startAnimation()"
  >
    Start with 'startAnimation' function
  </MDBBtn>
</template>
<script>
  import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
      MDBBtn,
    },
    setup() {
      const manual = ref(null);

      return {
        manual,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const manual = ref<InstanceType<typeof MDBAnimation> | null>(null);
</script>

On scroll

Use trigger="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. 

<template>
  <MDBAnimation trigger="onScroll" animation="slide-in-left">
    <MDBIcon icon="car-side" size="3x" />
  </MDBAnimation>
</template>
<script>
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</script>

Repeat animation on scroll

If you want to launch the animation every time it's reached when scrolling use repeatOnScroll. 

<template>
  <MDBAnimation trigger="onScroll" animation="slide-in-left" repeatOnScroll>
    <MDBIcon icon="car-side" size="3x" />
  </MDBAnimation>
</template>
<script>
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</script>

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 :showOnLoad="false". However, remember that this may have a negative impact on SEO. 

<template>
  <MDBAnimation
    trigger="onScroll"
    animation="slide-in-left"
    repeatOnScroll
    :showOnLoad="false"
  >
    <MDBIcon icon="car-side" size="3x" />
  </MDBAnimation>
</template>
<script>
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</script>

Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

<template>
  <div class="d-flex justify-content-around">
    <div>
      <MDBBtn
        color="primary"
        class="me-5"
        aria-controls="#animateClick"
        @click="animateClick = true"
      >
        Animation on Click
      </MDBBtn>
      <MDBAnimation
        id="animateClick"
        trigger="manually"
        animation="slide-out-right"
        reset
        v-model="animateClick"
      >
        <MDBIcon icon="car-side" size="3x" />
      </MDBAnimation>
    </div>
    <div>
      <MDBBtn
        color="primary"
        class="me-5"
        aria-controls="#animateHover"
        @mouseenter="animateHover = true"
      >
        Animation on Hover
      </MDBBtn>
      <MDBAnimation
        id="animateHover"
        trigger="manually"
        animation="slide-out-right"
        reset
        v-model="animateHover"
      >
        <MDBIcon icon="car-side" size="3x" />
      </MDBAnimation>
    </div>
  </div>
</template>
<script>
  import { MDBAnimation, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBAnimation,
      MDBBtn,
      MDBIcon,
    },
    setup() {
      const animateClick = ref(false);
      const animateHover = ref(false);
      return {
        animateClick,
        animateHover,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const animateClick = ref(false);
  const animateHover = ref(false);
</script>

Start animation manually

Use repeat property and toggle v-model to start or stop the animatio at the right moment. 

<template>
  <MDBAnimation
    id="manualExample"
    trigger="manually"
    animation="fade-in"
    repeat
    reset
    v-model="manualExample"
  >
    <MDBIcon icon="car-side" size="3x" />
  </MDBAnimation>
  <MDBBtn
    color="primary"
    class="ms-3"
    aria-controls="#manualExample"
    @click="manualExample = true"
  >
    Start
  </MDBBtn>
  <MDBBtn
    color="primary"
    class="ms-3"
    aria-controls="#manualExample"
    @click="manualExample = false"
  >
    Stop
  </MDBBtn>
</template>
<script>
  import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
      MDBBtn,
    },
    setup() {
      const manualExample = ref(false);
      return {
        manualExample,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const manualExample = ref(false);
</script>

Change animation type

You can change the element's animation type at any time by changing the animation property. 

<template>
  <MDBAnimation
    id="changeAnimation"
    trigger="onLoad"
    :animation="animationType"
    :duration="1000"
    repeat
    reset
  >
    <MDBIcon icon="car-side" size="3x" />
  </MDBAnimation>
  <MDBBtn
    color="primary"
    class="ms-3"
    aria-controls="#changeAnimation"
    @click="
      () => {
        if (animationType === 'zoom-in') {
          animationType = 'zoom-out';
        } else {
          animationType = 'zoom-in';
        }
      }
    "
  >
    Start
  </MDBBtn>
</template>
<script>
  import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBAnimation,
      MDBIcon,
      MDBBtn,
    },
    setup() {
      const animationType = ref('zoom-in');
      return { animationType };
    },
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const animationType = ref('zoom-in');
</script>

List group

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<template>
  <div class="d-flex">
    <MDBListGroup style="width: 18rem">
      <MDBListGroupItem
        v-for="(item, index) in listGroupItems"
        :key="item.text"
        @click="e => removeListGroupItem(e, index)"
        ><MDBAnimation
          trigger="onLoad"
          :animation="item.animation"
          reset
          @start="handleStartItem"
          @end="el => handleEndItem(el, item.status, index)"
          >{{ item.text }}</MDBAnimation
        ></MDBListGroupItem
      >
    </MDBListGroup>
    <div class="ms-3">
      <MDBBtn color="primary" id="add" @click="addListGroupItem">add</MDBBtn>
    </div>
  </div>
</template>
<script>
  import { MDBAnimation, MDBListGroup, MDBListGroupItem, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBAnimation,
      MDBListGroup,
      MDBListGroupItem,
      MDBBtn
    },
    setup() {
      const listGroupItems = ref([
        {
          text: "Cras justo odio"
        },
        {
          text: "Dapibus ac facilisis in"
        },
        {
          text: "Vestibulum at eros"
        }
      ]);
      const addListGroupItem = () => {
        const number = listGroupItems.value.length + 1;
        const animation = number > 1 ? "slide-in-down" : "fade-in";
        const item = {
          text: `element ${number}`,
          animation,
          status: "added"
        };
        listGroupItems.value.push(item);
      };
      const removeListGroupItem = (e, index) => {
        const target = e.target.closest("li");
        const prevEl = target.previousElementSibling
          ? target.previousElementSibling
          : target;
        // animation change will cause animation to start
        const animation = prevEl === target ? "fade-out" : "slide-out-up";
        listGroupItems.value[index] = {
          ...listGroupItems.value[index],
          animation,
          status: "delete"
        };
      };
      const handleStartItem = (el, status) => {
        if (status === "delete") {
          return;
        }
        if (el.parentNode?.previousElementSibling) {
          el.parentNode.previousElementSibling.style.zIndex = "1";
        }
      };
      const handleEndItem = (el, status, index) => {
        if (el.parentNode?.previousElementSibling) {
          el.parentNode.previousElementSibling.style.zIndex = "0";
        }
        if (status === "delete") {
          listGroupItems.value.splice(index, 1);
        }
      };
      return {
        listGroupItems,
        addListGroupItem,
        removeListGroupItem,
        handleStartItem,
        handleEndItem
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBListGroup, MDBListGroupItem, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const listGroupItems = ref<{[props: string]: string}[]>([
    {
      text: "Cras justo odio"
    },
    {
      text: "Dapibus ac facilisis in"
    },
    {
      text: "Vestibulum at eros"
    }
  ]);
  const addListGroupItem = () => {
    const number = listGroupItems.value.length + 1;
    const animation = number > 1 ? "slide-in-down" : "fade-in";
    const item = {
      text: `element ${number}`,
      animation,
      status: "added"
    };
    listGroupItems.value.push(item);
  };
  const removeListGroupItem = (e: Event, index: number) => {
    const target = (e.target as HTMLElement).closest("li");
    const prevEl = target.previousElementSibling
      ? target.previousElementSibling
      : target;
    // animation change will cause animation to start
    const animation = prevEl === target ? "fade-out" : "slide-out-up";
    listGroupItems.value[index] = {
      ...listGroupItems.value[index],
      animation,
      status: "delete"
    };
  };
  const handleStartItem = (el: HTMLElement, status: string) => {
    if (status === "delete") {
      return;
    }
    if (el.previousElementSibling) {
      const element = el.previousElementSibling as HTMLElement;
      element.style.zIndex = "1";
    }
  };
  const handleEndItem = (el: HTMLElement, status: string, index: number) => {
    if (el.previousElementSibling) {
      const element = el.previousElementSibling as HTMLElement;
      element.style.zIndex = "0";
    }
    if (status === "delete") {
      listGroupItems.value.splice(index, 1);
    }
  };
</script>

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. 
<template>
  <MDBAccordion v-model="activeItem">
    <MDBAccordionItem
      headerTitle="Accordion Item #1"
      collapseId="collapseOne"
      @click="animation = !animation"
    >
      <MDBAnimation
        reset
        trigger="manually"
        v-model="animation"
        animation="fade-in-up"
        :duration="500"
        :delay="500"
      >
        <strong>This is the first item's accordion body.</strong> It
        is shown by default, until the collapse plugin adds the
        appropriate classes that we use to style each element. These
        classes control the overall appearance, as well as the showing
        and hiding via CSS transitions. You can modify any of this
        with custom CSS or overriding our default variables. It's also
        worth noting that just about any HTML can go within the
        MDBAccordionItem, though the transition does limit overflow.
      </MDBAnimation>
    </MDBAccordionItem>

    <MDBAccordionItem
      headerTitle="Accordion Item #2"
      collapseId="collapseTwo"
      @click="animation = !animation"
    >
      <MDBAnimation
        reset
        trigger="manually"
        v-model="animation"
        animation="fade-in-up"
        :duration="500"
        :delay="500"
      >
        <strong>This is the second item's accordion body.</strong>
        It is hidden by default, until the collapse plugin adds the
        appropriate classes that we use to style each element. These
        classes control the overall appearance, as well as the showing
        and hiding via CSS transitions. You can modify any of this
        with custom CSS or overriding our default variables. It's also
        worth noting that just about any HTML can go within the
        MDBAccordionItem, though the transition does limit overflow.
      </MDBAnimation>
    </MDBAccordionItem>
    <MDBAccordionItem
      headerTitle="Accordion Item #3"
      collapseId="collapseThree"
      @click="animation = !animation"
    >
      <MDBAnimation
        reset
        trigger="manually"
        v-model="animation"
        animation="fade-in-up"
        :duration="500"
        :delay="500"
      >
        <strong>This is the third item's accordion body.</strong> It
        is hidden by default, until the collapse plugin adds the
        appropriate classes that we use to style each element. These
        classes control the overall appearance, as well as the showing
        and hiding via CSS transitions. You can modify any of this
        with custom CSS or overriding our default variables. It's also
        worth noting that just about any HTML can go within the
        MDBAccordionItem, though the transition does limit overflow.
      </MDBAnimation>
    </MDBAccordionItem>
  </MDBAccordion>
</template>
<script>
  import { MDBAnimation, MDBAccordion, MDBAccordionItem } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBAnimation,
      MDBAccordion,
      MDBAccordionItem,
    },
    setup() {
      const activeItem = ref("collapseOne");
      const animation = ref(false);

      return {
        activeItem,
        animation
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBAccordion, MDBAccordionItem } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const activeItem = ref("collapseOne");
  const animation = ref(false);
</script>

Animations - API

Import

<script>
  import { MDBAnimations } from 'mdb-vue-ui-kit';
</script>

Properties

Name Type Default Description Example
beginHidden Boolean false Makes the animating element hidden before the animation starts <MDBAnimation beginHidden />
tag String 'div' Defines tag of the MDBAnimation element <MDBAnimation tag="div" />
trigger String 'onClick Set how to run the animation (onClick, onLoad, onScroll, onHover, manually) <MDBAnimation trigger="manually" />
v-model Boolean false Toggle animation when trigger="manually" <MDBAnimation trigger="manually" v-model="true" />
animation String 'fade-in' Changes animation <MDBAnimation animation="fade-out" />
reset Boolean false Set to reset the animation after it finishes <MDBAnimation reset />
duration Number 500 Set animation duration <MDBAnimation :duration="1000" />
delay Number 0 Set animation delay <MDBAnimation :delay="300" />
interval Number 0 Set the time interval between animations <MDBAnimation :interval="300" />
repeat Boolean / Number false Set animation repeat - set true to repeat infinity or enter the number of times the animation should repeat <MDBAnimation :repeat="3" />
direction String 'normal' Set animation direction <MDBAnimation direction="reverse" />
repeatOnScroll Boolean false Set to true to start the animation each time the item appears on the screen <MDBAnimation trigger="onScroll" repeatOnScroll />
scrollOffset Number 0 Set offset for animate on scroll <MDBAnimation trigger="onScroll" :scrollOffset="200" />
showOnLoad Boolean true Define whether item should be visible on the screen before the animation runs. 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 <MDBAnimation trigger="onScroll" :showOnLoad="200" />

Methods

Name Description Example
startAnimation Start animating the element. Use on animation component ref element animationRef.startAnimation()
stopAnimation Stop animating the element (e.g. if it has repeteable animation or interval). Use on animation component ref element animationRef.stopAnimation() 
<template>
  <MDBAnimation
    ref="manual"
    v-model="isTriggered"
    tag="i"
    class="fas fa-car-side fa-3x"
    trigger="manually"
    reset
    animation="slide-right"
  />
  <MDBBtn
    style="width: 200px"
    color="primary"
    @click="manualStartAnimation"
    >Start with 'startAnimation' function
  </MDBBtn>
</template>
<script>
  import { MDBAnimation, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  export default {
    components: {
      MDBAnimation,
      MDBBtn
    },
    setup() {
      const manual = ref(null);
      const isTriggered = ref(false);
      const manualStartAnimation = () => manual.value.startAnimation();

      return {
        manual,
        isTriggered,
        manualStartAnimation
      }
    }
  }
</script>
<script setup lang="ts">
  import { MDBAnimation, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  const manual = ref<InstanceType<typeof MDBAnimation> | null>(null);
  const isTriggered = ref(false);
  const manualStartAnimation = () => manual.value?.startAnimation();

</script>

Events

Name Description
hide This event fires immediately when the element sets its visibility to hidden
show This event fires immediately when the element sets its visibility to visible
start This event fires immediately after animation start
end This event fires immediately after animation end 
<template>
  <MDBAnimation v-model="isTriggered" @hide="doSomething" />
</template>

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. 

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

$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;