Animations

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

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

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

Accessibility

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