Motion

Overview

Bootstrap animates many components with CSS transitions and animations. The motion utilities let you disable that motion on a single element (.transition-none, .animation-none) or apply a small predefined animation (.animation-shake, .animation-pop).

To disable motion globally at build time, set the $enable-transitions Sass option to false instead.

Transition

Add .transition-none to set transition: none, so property changes apply instantly rather than animating. Hover both buttons below: the default one eases its hover color change, while the second snaps instantly.

<button type="button" class="btn-solid theme-primary">Default</button>
<button type="button" class="btn-solid theme-primary transition-none">No hover transition</button>

Animation

Disable an animation

Add .animation-none to set animation: none, which stops any running keyframe animation (such as a spinner) on that element.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border animation-none" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Shake

Add .animation-shake to play a brief horizontal shake once. It pairs well with invalid form feedback—apply it to a field (or toggle it via JavaScript when validation fails) to draw attention to what needs fixing.

<input type="text" class="form-control is-invalid animation-shake" id="motionShakeDemo" value="Not quite right">

Pop

Add .animation-pop to scale an element in with a slight overshoot. It’s a good fit for content that appears dynamically, such as a badge whose count just updated.

<span class="badge theme-primary animation-pop" id="motionPopDemo">New</span>

Reduced motion

.transition-none and .animation-none are always applied, regardless of a user’s motion preference—reach for them when you want to remove motion in every case. Bootstrap already respects the prefers-reduced-motion media feature for its own components, so you don’t need them just to honor that setting.

The motion-adding utilities, .animation-shake and .animation-pop, are decorative, so they’re automatically disabled when the user prefers reduced motion.

CSS

Variables

Components declare their motion as -duration and -timing token pairs, so you can retune speed and easing independently. For example, the fade and collapse transitions read from --bs-transition-fade-duration / --bs-transition-fade-timing and --bs-transition-collapse-duration / --bs-transition-collapse-timing.

$fade-tokens: defaults(
  (
    --transition-fade-duration: .15s,
    --transition-fade-timing: linear,
  ),
  $fade-tokens
);

// stylelint-disable custom-property-no-missing-var-function
$collapse-tokens: defaults(
  (
    --transition-collapse-property: "block-size, display",
    --transition-collapse-duration: .35s,
    --transition-collapse-timing: ease,
  ),
  $collapse-tokens
);
// stylelint-enable custom-property-no-missing-var-function

Our overlay components—dialog, drawer, and menu—share one easing curve at the :root level, so a single override restyles all three.

// Shared easing curve for overlay components (dialog, drawer, menu)
--transition-timing-overlay: cubic-bezier(.22, 1, .36, 1),

Sass utilities API

Motion utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"transition": (
  property: transition,
  class: transition,
  values: (
    none: none,
  )
),

"animation": (
  property: animation,
  class: animation,
  values: (
    none: none,
    shake: animation-shake .82s cubic-bezier(.36, .07, .19, .97) both,
    pop: animation-pop .3s cubic-bezier(.34, 1.56, .64, 1) both,
  )
),