Motions

Transitions provide feedback, maintain context, and guide attention. Use them purposefully — not every state change needs animation.

CSSAccessibility

Duration Tokens

Motion speed affects perceived responsiveness. Faster isn’t always better.

Token	Duration	Use for
--tng-transition-duration-2xf	100ms	Icon transforms, micro-interactions
--tng-transition-duration-xf	200ms	Hover states, color changes, small toggles
--tng-transition-duration-f	300ms	Dropdowns, accordions, medium ui changes
--tng-transition-duration-m	400ms	Modals, large panels, complex layouts
--tng-transition-duration-s	600ms	Page transitions, dramatic reveals

Rule of thumb: Smaller elements and property changes = faster durations. Large or distant movements need time for the eye to track.

Easing Functions

Easing makes motion feel natural rather than robotic. Choose the right curve for the job.

Design System Curves

For polished motion with custom curves tuned to the brand:

--tng-transition-ease-out

Use for: Entrances, expansions, reveals—UI appearing or growing.

.dropdown {
  transition: opacity var(--tng-transition-duration-f)
    var(--tng-transition-ease-out);
}

Starts fast (immediate feedback) then decelerates smoothly. This is your default for most UI transitions.

--tng-transition-ease-in-out

Use for: Reversible movements, elements sliding between positions.

.indicator {
  transition: translate var(--tng-transition-duration-xf)
    var(--tng-transition-ease-in-out);
}

Symmetric acceleration/deceleration feels balanced when direction reverses.

Built-in Easings

Standard CSS timing functions for common scenarios:

ease

Use for: Hover effects, focus states, simple interactive feedback.

.card {
  transition: transform var(--tng-transition-duration-xf) ease;
}

.card:hover {
  transform: scale(1.02);
}

Similar to ease-out with a slightly different curve. Good default for basic interactions.

linear

Use for: Color/opacity changes, rotations, loading spinners.

.button {
  transition: background-color var(--tng-transition-duration-xf) linear;
}

Constant speed prevents visual distraction. Avoid for movement—it feels mechanical.

Quick Reference

Easing	Use case
--tng-transition-ease-out	Most UI transitions (default)
--tng-transition-ease-in-out	Reversible/sliding movements
ease	Hover/focus effects
linear	Colors, opacity, spins/rotates

Component State Changes

Interactive components fade their colours between states — hover, active, selected, checked and disabled — instead of switching instantly. Each one transitions only the colour properties that change between its states — background-color, border-color or color — over --tng-transition-duration-xf with ease:

.tng-chip {
  transition:
    background-color var(--tng-transition-duration-xf) ease,
    border-color var(--tng-transition-duration-xf) ease,
    color var(--tng-transition-duration-xf) ease;
}

• Focus rings stay instant. The fade leaves outline out, so keyboard focus shows up immediately.
• Size and weight changes stay instant. A thicker selected border or a bolder label jumps while its colour fades.
• Reduced motion is automatic. The duration token collapses under prefers-reduced-motion: reduce.
• Setting transition on a component replaces the fade. The property is a single list, so extend it rather than overwrite it when you add your own.
• Native range thumbs fade in Firefox only. Chromium and WebKit do not transition ::-webkit-slider-thumb.

When to Skip Transitions

• Instant feedback actions: Clicks, selections, immediate toggles
• User-triggered scrolling: Let the browser handle it
• Large data updates: Don’t animate hundreds of items
• Already in motion: Don’t interrupt existing animations

On this page

On this page

• Duration Tokens
• Easing Functions
  • Design System Curves
    • --tng-transition-ease-out
    • --tng-transition-ease-in-out
  • Built-in Easings
    • ease
    • linear
  • Quick Reference
• Component State Changes
• When to Skip Transitions

Motion is the one part of the design language that can make a page physically unusable — vestibular disorders turn a decorative slide into nausea, and a looping animation that can’t be stopped is a WCAG failure regardless of how good it looks. Both rules below are met by default when you use the transition tokens; the work is remembering them for anything that doesn’t.

Reduced motion

Always respect prefers-reduced-motion (WCAG 2.3.3). Users who enable “reduce motion” in their OS settings may experience motion sickness, vestibular disorders, or simply prefer less animation.

Note

This is already handled globally in our transition tokens, but you may need to override specific animations in components that don’t use the tokens.

.details::details-content {
  transition: block-size var(--tng-transition-duration-f)
    var(--tng-transition-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .details::details-content {
    transition-duration: 0.01ms;
  }
}

Note

Use 0.01ms instead of none to preserve @starting-style and other transition-dependent features while making the animation imperceptible.

Auto-playing content

• Never auto-play animations that last longer than 5 seconds without giving the user a way to pause or stop them (WCAG 2.2.2).
• Avoid flashing content that flashes more than 3 times per second (WCAG 2.3.1).

On this page

On this page

• Reduced motion
• Auto-playing content