7onicDESIGN SYSTEM

Duration

Defines transition and animation timing to create a consistent sense of speed across the interface.

Duration Scale

Seven animation speeds from instant to slowest

duration-instant0ms

Instant change, no transition

Hover to preview

duration-fast100ms

Hover, focus

Hover to preview

duration-micro150ms

Buttons, micro-interactions

Hover to preview

duration-normal200ms

Standard UI transitions (default)

Hover to preview

duration-slow300ms

Modal and drawer open/close

Hover to preview

duration-slower400ms

Complex animations

Hover to preview

duration-slowest500ms

Page transitions, large element changes

Hover to preview

duration-spin1000ms

Loading spinner (infinite)

Hover to preview

Component Demo

Feel the speed difference in real UI components

Button Hover150ms

duration-micro

Dropdown200ms
Option 1
Option 2

duration-normal

Modal300ms

duration-slow

Interactive Demo

Each box moves at a different speed.

100ms
150ms
200ms
300ms
400ms
500ms
1000ms

Use Cases

Recommended animation timing for common UI patterns

Hover Effect100ms
duration-fast

Color change on hover for links and icons

Button150ms
duration-micro

Hover and active state transitions for buttons

Dropdown200ms
duration-normal

Menu expand and collapse

Modal200ms / 100ms
duration-normal / fast

Modal open animation (normal) and close animation (fast)

Page Transition500ms
duration-slowest

Fade transition between pages

Best Practices

✓

Do

  • ✓Use short durations for small elements (100–200ms)
  • ✓Use longer durations for large elements (300–500ms)
  • ✓Minimize perceived wait time
  • ✓Respect accessibility motion preferences
✕

Don't

  • ✗Animations longer than 500ms
  • ✗Slow transitions on frequent interactions
  • ✗Inconsistent speed mixing
  • ✗Unnecessary animations