Motion

• --duration-instant

  0ms

• --duration-fastest

  50ms

• --duration-fast

  100ms

• --duration-normal

  150ms

• --duration-moderate

  200ms

• --duration-slow

  300ms

• --duration-slower

  400ms

• --duration-slowest

  600ms

• --duration-ambient

  1800ms

• --duration-sweep

  2400ms

• --transition-duration-instantduration-instant

  var(--duration-instant) → 0ms

• --transition-duration-fastestduration-fastest

  var(--duration-fastest) → 50ms

• --transition-duration-fastduration-fast

  var(--duration-fast) → 100ms

• --transition-duration-normalduration-normal

  var(--duration-normal) → 150ms

• --transition-duration-moderateduration-moderate

  var(--duration-moderate) → 200ms

• --transition-duration-slowduration-slow

  var(--duration-slow) → 300ms

• --transition-duration-slowerduration-slower

  var(--duration-slower) → 400ms

• --transition-duration-slowestduration-slowest

  var(--duration-slowest) → 600ms

• --ease-standardease-standard

  cubic-bezier(0.4, 0, 0.2, 1)

• --ease-enterease-enter

  cubic-bezier(0, 0, 0.2, 1)

• --ease-exitease-exit

  cubic-bezier(0.4, 0, 1, 1)

• --ease-springease-spring

  linear( 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1 )

• --ease-spring-livelyease-spring-lively

  linear( 0, 0.012 1.7%, 0.044 3.3%, 0.092 5%, 0.223 8.3%, 0.607 16.7%, 0.744 20%, 0.859 23.3%, 0.949 26.7%, 1.015 30%, 1.073 35%, 1.094 40%, 1.085 46.7%, 1.008 66.7%, 0.991 81.7%, 1 )

• --interactive-transition

  background-color var(--duration-moderate) var(--ease-standard), border-color var(--duration-moderate) var(--ease-standard), color var(--duration-moderate) var(--ease-standard), box-shadow var(--duration-moderate) var(--ease-standard), outline-width var(--duration-normal) var(--ease-standard), outline-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-spring)

• --stagger-base

  30ms

Play once when the class is applied. Press a preview to replay it.

• animate-fade-in
• animate-scale-in
• animate-pop-in

  Entrance: fade + slide-up + slight scale. Pair with origin-bottom (or any origin-*) to grow from a specific edge.

• motion-fade-in

  @deprecated use animate-fade-in, remove in v3

• motion-fade-out

  @deprecated no replacement, use motion-scale or motion-slide, remove in v3

• motion-scale-in

  @deprecated use animate-scale-in, remove in v3

• motion-scale-out

  @deprecated no replacement, use motion-scale or motion-slide, remove in v3

• motion-pop-in

  @deprecated use animate-pop-in, remove in v3

• animate-pulse-subtle

  Loops while content is pending. prefers-reduced-motion cuts it to a single 0.01ms pass, which leaves the element at full opacity: a static tint.

• animate-shimmer

  A loading surface: a tint pulse under a highlight sweeping across it. background-attachment: fixed anchors the gradient to the viewport, so every element wearing this class shows the slice of one shared sweep that falls where it sits. A one-line placeholder and a full-width block then agree, which a per-element sweep cannot do: it would restart at each element's own edges and run at a different apparent speed on each. The cost is that the sweep paints rather than riding the compositor, since only background-position can express a shared gradient. The element's own fill (from emphasis-*) is the base; the gradient paints --sheen-shade over it everywhere the band is not and --sheen-highlight inside the band, so the band is the lighter of the two in both themes. Radius clips the background, so a circle stays a circle. Reduced motion drops the gradient and leaves the static tint.

• animate-indeterminate

  Work of unknown length: a bar sweeping across a positioned parent that clips its overflow, such as a progress track. The sweep animates the logical inset, so it runs right to left under dir='rtl'. Reduced motion holds a full-width bar at a soft tint, since the global reset would otherwise park it off the end of the track.

• animate-shake
• animate-nudge

  One-shot attention cues. Replay by toggling the class.

• animate-pop
• animate-pop-tap

  A tap response: animate-pop at 600ms reads as a notification.

Driven by data-starting-style and data-ending-style. Press a preview to toggle it.

• motion-scale

  Scale + fade. Pair with origin-[var(--transform-origin)] (or any origin-*) to scale from a specific point.

• motion-slide

  Fade + slide — up on enter, down on exit.

• motion-drawer

  Drawer surface — slides off its anchored edge and tracks Base UI's live swipe offset. transform, not translate: Base UI writes an inline transform mid-swipe, which must override the resting value, not compose. A surface held off its edge sets --drawer-float so it travels clear.

• motion-toast

  A toast in a Base UI toast viewport. Collapsed, the stack sits behind the frontmost toast, clamped to its height and peeking out away from the edge; fanned out while the viewport is hovered or focused. Enters, restacks and snaps back from a swipe on a lively spring; leaves quickly towards its edge or the way it was swiped. Pair with absolute bottom-0 origin-bottom, or with absolute top-0 origin-top and data-side='top' for a top viewport.

• Toggle

  Open
  is-disclosure-animated

  Put on a <details>, or a Base UI collapsible panel, so its content opens and closes by height.

The keyframes the animation classes run.

• @keyframes fade-in
• @keyframes fade-out
• @keyframes scale-in
• @keyframes scale-out
• @keyframes shake
• @keyframes nudge
• @keyframes pop
• @keyframes pulse-subtle
• @keyframes shimmer-sweep
• @keyframes indeterminate-sweep
• @keyframes pop-in