Utilities for animating elements with CSS animations.

Quick reference

.animate-noneanimation: none;
.animate-spinanimation: spin 1s linear infinite;
.animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
.animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
.animate-bounceanimation: bounce 1s infinite;

Basic usage


Add the animate-spin utility to add a linear spin animation to elements like loading indicators.

<button type="button" class="btn btn-primary ...">
  <i class="animate-spin fas fa-spinner"></i>


Add the animate-ping utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.

  <div class="position-relative d-inline-flex">
    <button type="button" class="btn btn-outline-primary pe-none fw-semibold ">Transactions</button>
    <span class="d-flex position-absolute bd-h-3 bd-w-3 top-0 end-0 mt-n1 me-n1">
      <span class="animate-ping position-absolute h-100 w-100 rounded-circle bg-primary bg-opacity-75"></span>
      <span class="rounded-circle bd-h-3 bd-w-3 bg-primary"></span>


Add the animate-pulse utility to make an element gently fade in and out — useful for things like skeleton loaders.

<div class="max-w-sm mx-auto bg-body rounded">
  <div class="animate-pulse d-flex align-items-start shadow p-3">
    <span class="placeholder rounded-circle bd-h-10 bd-w-10"></span>
    <div class="ms-3 flex-grow-1">
      <span class="placeholder placeholder-xs col-10"></span>
      <span class="placeholder placeholder-xs col-6 mt-3"></span>
      <span class="placeholder placeholder-xs col-4 mt-3"></span>
      <span class="placeholder placeholder-xs col-12"></span>


Add the animate-bounce utility to make an element bounce up and down — useful for things like “scroll down” indicators.

<div class="animate-bounce ...">
  <i class="fas fa-arrow-down fa-lg"></i>