Motion

Motion Timing

CSS custom properties for consistent animation timing across the theme.

Duration / Delay / Interval variables

Durations

--bs-duration-faster 0.25s --bs-duration-fast 0.5s --bs-duration-normal 1s --bs-duration-slow 1.5s --bs-duration-slower 2s

Delays

--bs-delay-instant 0s --bs-delay-late 0.5s --bs-delay-later 1s --bs-delay-latest 1.5s

Intervals

--bs-interval-shorter 0.0625s --bs-interval-short 0.125s --bs-interval-normal 0.25s --bs-interval-long 0.375s --bs-interval-longer 0.5s

Easing

--ease-in-out cubic-bezier(0.645, 0.045, 0.355, 1) --ease-in cubic-bezier(0.55, 0.055, 0.675, 0.19) --ease-out cubic-bezier(0.215, 0.61, 0.355, 1) --ease-out-back cubic-bezier(0.34, 1.56, 0.64, 1)

// usage in custom CSS
.my-element {
  transition: transform var(--bs-duration-fast) var(--ease-out);
  animation-delay: var(--bs-delay-late);
}

Animations

Scroll-triggered animations via IntersectionObserver. Each element animates once when entering the viewport.

.anim-fade-up .anim-fade-down

data-anim-*

fade-up

fade-down

<div class="anim-fade-up">...</div>
<div class="anim-fade-down">...</div>

.anim-fade-left .anim-fade-right

data-anim-*

fade-right

fade-left

<div class="anim-fade-left">...</div>
<div class="anim-fade-right">...</div>

.anim-scale-in .anim-scale-out

data-anim-*

scale-in

scale-out

<div class="anim-scale-in">...</div>
<div class="anim-scale-out">...</div>

.anim-staggerdata-anim-interval

// children appear in cascade (fade-up)
<div class="row anim-stagger">
  <div class="col">First</div>
  <div class="col">Second</div>
  <div class="col">Third</div>
</div>

// custom interval
<div class="anim-stagger" data-anim-interval="0.15">...</div>

Data Attributes

Override animation defaults per element.

data-anim-*

Attribute Default Description data-anim-duration 1 Duration in seconds data-anim-delay 0 Delay before animation starts data-anim-easing ease-out CSS easing function data-anim-interval 0.25 Delay between children (stagger) data-anim-offset — Trigger offset (e.g. 200px, 20%) data-anim-anchor-placement — Trigger point (e.g. top-center) data-anim-anchor — Observe another element (CSS selector)

// fast with delay
<div class="anim-fade-up" data-anim-duration="0.5" data-anim-delay="0.3">...</div>

// custom easing
<div class="anim-fade-up" data-anim-easing="ease-in-out">...</div>

// trigger when top of element reaches center of viewport
<div class="anim-fade-up" data-anim-anchor-placement="top-center">...</div>

// animate when another element enters viewport
<div class="anim-fade-up" data-anim-anchor="#hero">...</div>

anchor-placement values

Format: element-viewport — when [element point] reaches [viewport point].

top-bottom Top of element hits bottom of viewport (default) top-center Top of element hits center of viewport top-top Top of element hits top of viewport center-center Center of element hits center of viewport bottom-bottom Bottom of element hits bottom of viewport

Accessibility

Motion preferences and reduced motion support.

prefers-reduced-motion

All [class*="anim-"] elements are visible by default (no-JS fallback).

When prefers-reduced-motion: reduce is active, all animations and transitions are effectively disabled.

// automatic — no extra markup needed
// elements with anim-* classes get:
//   opacity: 1; transform: none;  (fallback)
//   animation-duration: 0.01ms;   (reduced motion)