Animations

React 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

To implement animation use MDBAnimation component. In the example below, we use the component with icon tag <MDBAnimation tag="i"> and props reset={true} animation="slide-out-right" duration={500} to give it animation on click.

reset={true} lets you decide if the animation can be repeated

duration={500} lets you specify duration of the animation

animation="slide-out-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.

import React from 'react';
import { MDBAnimation } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBAnimation
      reset={true}
      tag='i'
      animation='slide-right'
      className='fas fa-car-side fa-3x'
      start='onClick'
      duration={500}
    />
  );
}
import React from 'react';
import { useAnimatedRef } from 'mdb-react-ui-kit';

export default function App() {
  const basicExampleRef = useAnimatedRef({ animation: 'slide-right', duration: 500, start: 'onClick', reset: true })

  return (
    <i ref={basicExampleRef} className='fas fa-car-side fa-3x'></i>
  );
}

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-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 data-mdb-attribute. 

import React from 'react';
import { MDBAnimation } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBAnimation
      reset={true}
      tag='i'
      animation='slide-right'
      className='fas fa-car-side fa-3x'
      start='onClick'
      duration={500}
    />
  );
}
import React from 'react';
import { useAnimatedRef } from 'mdb-react-ui-kit';

export default function App() {
  const basicExampleRef = useAnimatedRef({ animation: 'slide-right', duration: 500, start: 'onClick', reset: true })

  return (
    <i ref={basicExampleRef} className='fas fa-car-side fa-3x'></i>
  );
}

On hover

Use start='onHover' to launch the animation on mouse hover. 

import React from 'react';
import { MDBAnimation } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBAnimation
      reset={true}
      tag='i'
      animation='slide-right'
      className='fas fa-car-side fa-3x'
      start='onHover'
      duration={500}
    />
  );
}
import React from 'react';
import { useAnimatedRef } from 'mdb-react-ui-kit';

export default function App() {
  const basicExampleRef = useAnimatedRef({ animation: 'slide-right', duration: 500, start: 'onHover', reset: true })

  return (
    <i ref={basicExampleRef} className='fas fa-car-side fa-3x'></i>
  );
}

On Load

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

import React from 'react';
import { MDBAnimation } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBAnimation
      tag='i'
      animation='zoom-in'
      className='fas fa-car-side fa-3x'
      start='onLoad'
      duration={500}
    />
  );
}
import React from 'react';
import { useAnimatedRef } from 'mdb-react-ui-kit';

export default function App() {
  const basicExampleRef = useAnimatedRef({ animation: 'zoom-in', duration: 500, start: 'onLoad' })

  return (
    <i ref={basicExampleRef} className='fas fa-car-side fa-3x'></i>
  );
}

On scroll

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

import React from 'react';
import { MDBAnimation } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBAnimation
      reset={true}
      tag='i'
      animation='slide-in-left'
      className='fas fa-car-side fa-3x'
      start='onScroll'
      duration={500}
    />
  );
}
import React from 'react';
import { useAnimatedRef } from 'mdb-react-ui-kit';

export default function App() {
  const basicExampleRef = useAnimatedRef({ animation: 'slide-in-left', duration: 500, start: 'onScroll', reset: true })

  return (
    <i ref={basicExampleRef} className='fas fa-car-side fa-3x'></i>
  );
}

Repeat animation on scroll

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

import React from 'react';
import { MDBAnimation } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBAnimation
      reset={true}
      repeatOnScroll
      tag='i'
      animation='slide-in-left'
      className='fas fa-car-side fa-3x'
      start='onScroll'
      duration={500}
    />
  );
}
import React from 'react';
import { useAnimatedRef } from 'mdb-react-ui-kit';

export default function App() {
  const basicExampleRef = useAnimatedRef({
    animation: 'slide-in-left',
    duration: 500,
    start: 'onScroll',
    reset: true,
    repeatOnScroll: true,
  });

  return (
    <i ref={basicExampleRef} className='fas fa-car-side fa-3x'></i>
  );
}

Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

import React, { useState } from 'react';
import { MDBAnimation, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [clickAnimation, setClickAnimation] = useState(false);
  const [hoverAnimation, setHoverAnimation] = useState(false);

  const toggleClick = () => {
    setClickAnimation(!clickAnimation)
  }

  const toggleHover = () => {
    setHoverAnimation(!hoverAnimation)
  }

  return (
    <div className='d-flex justify-content-around'>
      <div>
        <MDBBtn className='me-5' onClick={toggleClick}>
          Animation on Click
        </MDBBtn>
        <MDBAnimation
          reset={true}
          enableTarget
          target={clickAnimation}
          setTarget={setClickAnimation}
          tag='i'
          animation='slide-right'
          className='fas fa-car-side fa-3x'
          start='onClick'
          duration={500}
        />
      </div>
      <div>
        <MDBBtn className='me-5' onMouseEnter={toggleHover}>
          Animation on Hover
        </MDBBtn>
        <MDBAnimation
          reset={true}
          enableTarget
          target={hoverAnimation}
          setTarget={setHoverAnimation}
          tag='i'
          animation='slide-right'
          className='fas fa-car-side fa-3x'
          start='onHover'
          duration={500}
        />
      </div>
    </div>
  );
}
import React from 'react';
import { useAnimatedRef } from 'mdb-react-ui-kit';

export default function App() {
  const refExternalClickBtn = useRef(null);
  const refExternalClick = useAnimatedRef({
    animation: 'slide-right',
    reset: true,
    externalElement: refExternalClickBtn,
  });

  const refExternalHoverBtn = useRef(null);
  const refExternalHover = useAnimatedRef({
    start: 'onHover',
    animation: 'slide-right',
    reset: true,
    externalElement: refExternalHoverBtn,
  });

  return (
    <div className='d-flex justify-content-around'>
      <div>
        <MDBBtn className='me-5' ref={refExternalClickBtn}>
          Animation on Click
        </MDBBtn>
        <i className='fas fa-car-side fa-3x' ref={refExternalClick}></i>
      </div>
      <div>
        <MDBBtn className='me-5' ref={refExternalHoverBtn}>
          Animation on Hover
        </MDBBtn>
        <i className='fas fa-car-side fa-3x' ref={refExternalHover}></i>
      </div>
    </div>
  );
}

Start animation manually

You can use the setTarget prop to start or stop the animation at the right moment. 

import React, { useState } from 'react';
import { MDBAnimation, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [infiniteAnimation, setInifiniteAnimation] = useState(false);

  return (
    <div>
      <MDBAnimation
        infinite
        enableTarget
        target={infiniteAnimation}
        setTarget={setInifiniteAnimation}
        tag='i'
        animation='fade-in'
        className='fas fa-car-side fa-3x'
        start='onClick'
        duration={500}
      />
      <MDBBtn className='ms-3' onClick={() => setInifiniteAnimation(true)}>
        start
      </MDBBtn>
      <MDBBtn className='ms-3' onClick={() => setInifiniteAnimation(false)}>
        stop
      </MDBBtn>
    </div>
  );
}

Change animation type

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

import React, { useState } from 'react';
import { MDBAnimation, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [changeAnimation, setChangeAnimation] = useState(false);

  const toggleClick = () => {
    setChangeAnimation(!changeAnimation);
  }

  return (
    <>
      <MDBAnimation
        infinite
        tag='i'
        animation={changeAnimation ? 'zoom-in' : 'zoom-out'}
        className='fas fa-car-side fa-3x'
        start='onLoad'
        duration={500}
      />
      <MDBBtn className='ms-3' onClick={toggleClick}>
        change animation
      </MDBBtn>
    </>
  );
}

List group

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
import React, { useState } from 'react';
import {
  MDBAnimation,
  MDBBtn,
  MDBListGroup,
  MDBListGroupItem,
} from 'mdb-react-ui-kit';

export default function App() {
  const [list, setList] = useState(['Cras justo odio', 'Dapibus ac facilisis in', 'Vestibulum at eros']);

  const addListRow = () => {
    setList([...list, `element ${list.length}`]);
  };

  const removeListRow = (id: number) => {
    setList(list.filter((row, i) => i !== id));
  };

  return (
    <div className='d-flex'>
      <MDBListGroup style={{ minWidth: '22rem' }}>
        {list.map((el, i) => (
          <MDBListGroupItem key={i} onClick={() => removeListRow(i)}>
            <MDBAnimation animation='slide-in-down' start='onLoad'>
              {el}
            </MDBAnimation>
          </MDBListGroupItem>
        ))}
      </MDBListGroup>
      <div className='ms-3'>
        <MDBBtn onClick={addListRow}>add</MDBBtn>
      </div>
    </div>
  );
}

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. 
import React, { useState, useEffect } from 'react';
import {
  MDBAnimation,
  MDBBtn,
  MDBCard,
  MDBCardHeader,
  MDBCardBody,
  MDBCollapse,
} from 'mdb-react-ui-kit';

export default function App() {
  const [collapseAnimation, setCollapseAnimation] = useState([true, false, false]);
  const [collapseOpened, setCollapseOpened] = useState('accordionCollapse1');

  const toggleAccordion = (value: string) => {
    value !== collapseOpened ? setCollapseOpened(value) : setCollapseOpened('');
  };

  useEffect(() => {
    if (collapseOpened === 'accordionCollapse1') {
      setCollapseAnimation([true, false, false]);
    } else if (collapseOpened === 'accordionCollapse2') {
      setCollapseAnimation([false, true, false]);
    } else if (collapseOpened === 'accordionCollapse3') {
      setCollapseAnimation([false, false, true]);
    } else {
      setCollapseAnimation([false, false, false]);
    }
  }, [collapseOpened]);

  return (
    <>
      <MDBCard>
        <MDBCardHeader background='white'>
          <h2 className='mb-0'>
            <MDBBtn
              onClick={() => toggleAccordion('accordionCollapse1')}
              block
              className='btn-link text-start'
              outline
              style={{ border: 'none' }}
            >
              Collapsible Group Item #1
            </MDBBtn>
          </h2>
        </MDBCardHeader>
        <MDBAnimation
          enableTarget
          target={collapseAnimation[0]}
          tag='div'
          animation='fade-in-up'
          duration={500}
          delay={500}
        >
          <MDBCollapse id='accordionCollapse1' open={collapseOpened === 'accordionCollapse1'}>
            <MDBCardBody>
              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.
            </MDBCardBody>
          </MDBCollapse>
        </MDBAnimation>
      </MDBCard>
      <MDBCard>
        <MDBCardHeader background='white'>
          <h2 className='mb-0'>
            <MDBBtn
              onClick={() => toggleAccordion('accordionCollapse2')}
              block
              className='btn-link text-start'
              outline
              style={{ border: 'none' }}
            >
              Collapsible Group Item #2
            </MDBBtn>
          </h2>
        </MDBCardHeader>
        <MDBAnimation
          enableTarget
          target={collapseAnimation[1]}
          tag='div'
          animation='fade-in-up'
          duration={500}
          delay={500}
        >
          <MDBCollapse id='accordionCollapse2' open={collapseOpened === 'accordionCollapse2'}>
            <MDBCardBody>
              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.
            </MDBCardBody>
          </MDBCollapse>
        </MDBAnimation>
      </MDBCard>
      <MDBCard>
        <MDBCardHeader background='white'>
          <h2 className='mb-0'>
            <MDBBtn
              onClick={() => toggleAccordion('accordionCollapse3')}
              block
              className='btn-link text-start'
              outline
              style={{ border: 'none' }}
            >
              Collapsible Group Item #3
            </MDBBtn>
          </h2>
        </MDBCardHeader>
        <MDBAnimation
          enableTarget
          target={collapseAnimation[2]}
          tag='div'
          animation='fade-in-up'
          duration={500}
          delay={500}
        >
          <MDBCollapse id='accordionCollapse3' open={collapseOpened === 'accordionCollapse1'}>
            <MDBCardBody>
              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.
            </MDBCardBody>
          </MDBCollapse>
        </MDBAnimation>
      </MDBCard>
    </>
  );
}
import React, { useState, useRef } from 'react';
import {
  useAnimatedRef,
  MDBBtn,
  MDBCard,
  MDBCardHeader,
  MDBCardBody,
  MDBCollapse,
} from 'mdb-react-ui-kit';

export default function App() {
  const [collapseOpened, setCollapseOpened] = useState('accordionCollapse1');

  const toggleAccordion = (value: string) => {
    value !== collapseOpened ? setCollapseOpened(value) : setCollapseOpened('');
  };

  const refCollapseBtn1 = useRef(null);
  const refCollapse1 = useAnimatedRef({
    animation: 'fade-in-up',
    reset: true,
    delay: 500,
    externalElement: refCollapseBtn1,
  });

  const refCollapseBtn2 = useRef(null);
  const refCollapse2 = useAnimatedRef({
    animation: 'fade-in-up',
    reset: true,
    delay: 500,
    externalElement: refCollapseBtn2,
  });

  const refCollapseBtn3 = useRef(null);
  const refCollapse3 = useAnimatedRef({
    animation: 'fade-in-up',
    reset: true,
    delay: 500,
    externalElement: refCollapseBtn3,
  });

  return (
    <>
      <MDBCard>
        <MDBCardHeader background='white'>
          <h2 className='mb-0'>
            <MDBBtn
              onClick={() => toggleAccordion('accordionCollapse1')}
              block
              className='btn-link text-start'
              outline
              style={{ border: 'none' }}
              ref={refCollapseBtn1}
            >
              Collapsible Group Item #1
            </MDBBtn>
          </h2>
        </MDBCardHeader>
        <div ref={refCollapse1}>
          <MDBCollapse id='accordionCollapse1' open={collapseOpened === 'accordionCollapse1'}>
            <MDBCardBody>
              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.
            </MDBCardBody>
          </MDBCollapse>
        </div>
      </MDBCard>
      <MDBCard>
        <MDBCardHeader background='white'>
          <h2 className='mb-0'>
            <MDBBtn
              onClick={() => toggleAccordion('accordionCollapse2')}
              block
              className='btn-link text-start'
              outline
              style={{ border: 'none' }}
              ref={refCollapseBtn2}
            >
              Collapsible Group Item #2
            </MDBBtn>
          </h2>
        </MDBCardHeader>
        <div ref={refCollapse2}>
          <MDBCollapse id='accordionCollapse2' open={collapseOpened === 'accordionCollapse2'}>
            <MDBCardBody>
              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.
            </MDBCardBody>
          </MDBCollapse>
        </div>
      </MDBCard>
      <MDBCard>
        <MDBCardHeader background='white'>
          <h2 className='mb-0'>
            <MDBBtn
              onClick={() => toggleAccordion('accordionCollapse3')}
              block
              className='btn-link text-start'
              outline
              style={{ border: 'none' }}
              ref={refCollapseBtn3}
            >
              Collapsible Group Item #3
            </MDBBtn>
          </h2>
        </MDBCardHeader>
        <div ref={refCollapse3}>
          <MDBCollapse id='accordionCollapse3' open={collapseOpened === 'accordionCollapse3'}>
            <MDBCardBody>
              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.
            </MDBCardBody>
          </MDBCollapse>
        </div>
      </MDBCard>
    </>
  );
}

Animations - API

Import

import { MDBAnimation } from 'mdb-react-ui-kit';
import { useAnimatedRef } from 'mdb-react-ui-kit';

Properties

MDBAnimation

Name Type Default Description Example
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' | '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' 'slide-right' Animation type <MDBAnimation animation='fade' />
animationRef React.RefObject - Refetence to MDBAnimation element. <MDBAnimation animationRef={exampleRef} />
delay number 0 Set the animation delay <MDBAnimation delay={200} />
duration number 500 Animation duration time <MDBAnimation duration={1000} />
enableTarget boolean false Enables activating an animation through an external element <MDBAnimation enableTarget />
infinite boolean false Set the animation infinite <MDBAnimation infinite />
repeatOnScroll boolean false Set it to start the animation each time the item appears on the screen <MDBAnimation start='onScroll' repeatOnScroll />
reset boolean true Allows to repeat the animation <MDBAnimation reset={false} />
setTarget Function - Change animation state <MDBAnimation setTarget={setAnimation} />
start string 'onLoad' | 'onHover' | 'onClick' | 'onScroll' Animation start type <MDBAnimation start='onHover' />
tag string 'div' Defines tag of the MDBAnimation element <MDBAnimation tag="section" />
target boolean false Animation state <MDBAnimation target={animation} />

useAnimatedRef

Name Type Default Description Example
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' | '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' 'slide-right' Animation type useAnimatedRef({ animation: 'fade' })
delay number 0 Set the animation delay useAnimatedRef({ delay: 200 })
duration number 500 Animation duration time useAnimatedRef({ duration: 1000 })
externalTarget React.RefObject 500 Enables activating an animation through an external element useAnimatedRef({ externalTarget: externalTargetRef })
infinite boolean false Set the animation infinite useAnimatedRef({ infinite: true })
reset boolean false Allows to repeat the animation useAnimatedRef({ reset: false })
repeatOnScroll boolean false Set it to start the animation each time the item appears on the screen useAnimatedRef({ start: 'onScroll' repeatOnScroll: true })
start 'onLoad' | 'onHover' | 'onClick' | 'onScroll' onClick Animation start type useAnimatedRef({ start: 'onHover' })

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;