Bootstrap 6 Motion

Components animate with CSS transitions, and the timing is customizable — see transitions. Add .transition-none to set transition: none on one element, so its property changes apply instantly instead of animating.

Hover both buttons. The first eases into its hover colour; the second snaps.

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

<button type="button" class="btn-solid theme-primary transition-none">...</button>

The utility sets the transition shorthand, so it removes every transition on the element at once — including any you declared yourself. To retime one component instead of removing its motion, set its --cui-{component}-transition-duration to 0s.

Animation

Two keyframe animations ship as utilities: .animation-shake draws attention to something that went wrong, .animation-pop scales an element in as it appears. .animation-none removes an animation the way .transition-none removes a transition.

<button type="button" class="btn-solid theme-danger animation-shake">Shake</button>
<button type="button" class="btn-solid theme-primary animation-pop">Pop</button>

The keyframes are named animation-shake and animation-pop rather than shake and pop, so declaring an animation of your own under either bare name does not redefine ours.

An animation restarts when the class is applied, not when the page loads — so to replay one, remove the class, force a reflow, and add it back:

element.classList.remove('animation-shake')
void element.offsetWidth
element.classList.add('animation-shake')

Both stand down under prefers-reduced-motion: reduce while $enable-reduced-motion is on, which is the default — the element appears in its final state with no motion.

Reduced motion

.transition-none and .animation-none apply whatever the reader’s motion preference is. Reach for them when the motion has to go in every case.

You do not need it to honour that preference: with $enable-reduced-motion on, which is the default, every component transition is already wrapped in prefers-reduced-motion: no-preference. See reduced motion.

To remove every transition at build time instead, set the $enable-transitions Sass option to false.

Customizing

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,
  )
),