How do I add gifs to bootstrap 5?

Right here and in this video we're gonna just add an animated gif to it with the the scrolling

What is animation in HTML5?

You can create animations with HTML5 by combining HTML, CSS, and JavaScript (JS), with which you can build shapes . Also, you can control animations and edit images, video, and audio by means of JS or CSS elements, all of which you then add to a drawing board, which you set up with the <canvas> element.

How do you animate an image in HTML?

To add an animated image in HTML is quite easy. You need to use the <image> tag with the src attribute . The src attribute adds the URL of the image. Also, set the height and width of the image using the height and width attribute.

Is it safe to use Bootstrap 5 for production?

Bootstrap 5 is finally out - this time for real. STABLE - means that a technology is ready to use in production environments. Unlike an alpha or beta version. Bootstrap 5 is now stable .

Is Bootstrap 5 hard to learn?

Bootstrap is easy to learn , and this has helped it become the most popular CSS framework in the world. Picking up Bootstrap can seem complicated when learning to code. You can end up fighting against the framework. Usually, the reason behind this is a lack of experience and exposure.

Bootstrap 5 Animations - examples & tutorial (2024)

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

Bootstrap 5 Animations - examples & tutorial (1)

Video tutorial

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

fade-in

fade-in-down

fade-in-left

fade-in-right

fade-in-up

fade-out

fade-out-down

fade-out-left

fade-out-right

fade-out-up

slide-in-down

slide-in-left

slide-in-right

slide-in-up

slide-out-down

slide-out-left

slide-out-right

slide-out-up

slide-down

slide-left

slide-right

slide-up

zoom-in

zoom-out

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-toggle="animation" data-mdb-animation-reset="true" data-mdb-animation="slide-out-right" to give it animation on click.

data-mdb-toggle="animation" 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.

Show code Edit in sandbox

HTML

  <i data-mdb-toggle="animation" data-mdb-animation-reset="true" data-mdb-animation="slide-right" class="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-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.

Show code Edit in sandbox

HTML

  <i data-mdb-toggle="animation" data-mdb-animation-reset="true" data-mdb-animation="slide-right" class="fas fa-car-side fa-3x" ></i>

On hover

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

Show code Edit in sandbox

HTML

  <i data-mdb-toggle="animation" data-mdb-animation-start="onHover" data-mdb-animation-reset="true" data-mdb-animation="slide-right" class="fas fa-car-side fa-3x" ></i>

On Load

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

Show code Edit in sandbox

HTML

  <i data-mdb-toggle="animation" data-mdb-animation="zoom-in" data-mdb-animation-start="onLoad" class="fas fa-car-side fa-3x" ></i>

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.

Show code Edit in sandbox

HTML

  <i data-mdb-toggle="animation" data-mdb-animation="zoom-in" data-mdb-animation-start="onLoad" class="fas fa-car-side fa-3x" ></i>

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.

Show code Edit in sandbox

HTML

  <i data-mdb-toggle="animation" data-mdb-animation-start="onScroll" data-mdb-animation="slide-in-left" class="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 data-mdb-animation-on-scroll="repeat".

Show code Edit in sandbox

HTML

  <i data-mdb-toggle="animation" 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>

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.

Show code Edit in sandbox

HTML

  <i data-mdb-toggle="animation" 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" ></i>

Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

Show code Edit in sandbox

HTML

  <div class="d-flex justify-content-around"> <div> <button class="btn btn-primary me-5" data-mdb-toggle="animation" data-mdb-animation-target="#animate-click" > 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-toggle="animation" data-mdb-animation-target="#animate-hover" > 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>

Start animation manually

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

Show code Edit in sandbox

HTML
JavaScript

  <i id="manually-example" class="fas fa-car-side fa-3x"></i> <button id="manually-btn-start" class="btn btn-primary ms-3">start</button> <button id="manually-btn-stop" class="btn btn-primary ms-3">stop</button>

  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.

Show code Edit in sandbox

HTML
JavaScript

  <i id="change-animation-type-example" class="fas fa-car-side fa-3x"></i> <button id="change-animation-type-btn" class="btn btn-primary ms-3"> change animation </button>

  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.

Show code Edit in sandbox

HTML

  <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-lg-4 col-md-12 mb-4"> <img data-mdb-toggle="animation" 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-toggle="animation" 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-toggle="animation" 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-toggle="animation" 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-toggle="animation" 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-toggle="animation" 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-->

List group

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Show code Edit in sandbox

HTML
JavaScript

  <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">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> <div class="ms-3"> <button class="btn btn-primary" id="add">add</button> </div> </div>

  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(); });

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.

Show code Edit in sandbox

HTML
JavaScript

  <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header bg-white" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-start" type="button" data-mdb-toggle="collapse" 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"> <div class="card-header bg-white" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-start collapsed" type="button" data-mdb-toggle="collapse" 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"> <div class="card-header bg-white" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-start collapsed" type="button" data-mdb-toggle="collapse" 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>

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

Bootstrap 5 Animations - examples & tutorial (2024)

Animations

Basic example

Animation list

Basic Animations

Extended Animations

Launch options

On click

On hover

On Load

Manually

On scroll

Repeat animation on scroll

Show on load

Examples

Launching via external element

Start animation manually

Change animation type

Fading gallery

List group

Accordion

FAQs

Does bootstrap 5 have animations? ›