Transition

Duration, easing, and transition presets for smooth UI state changes.

Duration scale

Hover (or click) each track to watch the ball travel. The same easing (--easing-default) is applied across all four — only the duration changes.

--duration-fast
150ms

--duration-base
250ms

--duration-slow
400ms

--duration-slower
600ms

Easing curves

Hover each card to see how the same 400ms duration feels with different cubic-bezier curves. Spring overshoots briefly — ideal for scale and position changes.

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

Balanced in/out. Use for most UI state changes.

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

Slow start, fast end. Use when exiting the screen.

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

Fast start, slow end. Use when entering the screen.

--easing-spring cubic-bezier(0.34, 1.56, 0.64, 1)

Overshoots then settles. Use for scale and position.

Property presets — hover to preview

Each preset transitions only the properties it needs — avoids the performance cost of transition: all while keeping the class surface small.

Usage patterns

Compose token variables inline for one-off transitions, or use the preset classes for recurring patterns.

<button style="transition: background-color var(--duration-base) var(--easing-default);"> Save </button> <a class="tr-colors">Nav link</a> <div class="transition-transform" style="transition-duration: var(--duration-slow); transition-timing-function: var(--easing-spring);"> Spring card </div> @media (prefers-reduced-motion: reduce) { [class*="tr-"] { transition-duration: 0.01ms !important; } }

Token reference

Defined in token.css → §11 TRANSISI. Shared with the Animation system.

TokenValue · When to use

--duration-fast 150ms · Micro-interactions: hover, focus ring

--duration-base 250ms · Default: buttons, links, dropdowns

--duration-slow 400ms · Panels, drawers, page transitions

--duration-slower 600ms · Skeletons, complex reveals

--easing-default cubic-bezier(0.4, 0, 0.2, 1) · General purpose in/out

--easing-in cubic-bezier(0.4, 0, 1, 1) · Exit: element leaving viewport

--easing-out cubic-bezier(0, 0, 0.2, 1) · Enter: element arriving in viewport

--easing-spring cubic-bezier(0.34, 1.56, 0.64, 1) · Scale, position — natural overshoot

Other Components in Foundation