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
*
*
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.
Video tutorial
Move the mouse over the squares below to launch the animation.
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.
<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.
<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.
<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.
<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.
<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.
<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"
.
<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.
<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.
<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
<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.
<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();
})
Fading gallery
With animation on scroll you can create an impressive gallery that will appear smoothly step by step.
In the example below, we additionally use data-mdb-animation-delay
attribute on
some images to make it appears one by one.
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<img
data-mdb-animation-init
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<img
data-mdb-animation-init
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
data-mdb-animation-delay="300"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<img
data-mdb-animation-init
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
data-mdb-animation-delay="500"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<img
data-mdb-animation-init
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<img
data-mdb-animation-init
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
data-mdb-animation-delay="300"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/045.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<img
data-mdb-animation-init
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
data-mdb-animation-delay="500"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
// Initialization for ES Users
import { Animate, initMDB } from "mdb-ui-kit";
initMDB({ Animate });
List group
Click "Add" button to add a new item to the list.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<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.
<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.
import { Animate, initMDB } from "mdb-ui-kit";
initMDB({ Animate });
import "mdb-ui-kit"
Usage
Via CSS class
<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.
<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.
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
$('#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()
|
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. |
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.
// .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;