← Back to Motion & Animation

Consistent timing scales create predictable and harmonious motion throughout your interface. Use these standardized durations to maintain rhythm and hierarchy in your animations.

100ms
200ms
300ms
500ms
700ms
1000ms

instant

100ms

Immediate feedback, hover states

Button hover, tooltip show/hide

CSS CUSTOM PROPERTY
transition-duration: 100ms;
TAILWIND CSS
duration-100

fast

200ms

Quick interactions and micro-animations

Icon changes, small state transitions

CSS CUSTOM PROPERTY
transition-duration: 200ms;
TAILWIND CSS
duration-200

normal

300ms

Standard transition speed

Card interactions, form field focus

CSS CUSTOM PROPERTY
transition-duration: 300ms;
TAILWIND CSS
duration-300

moderate

500ms

Deliberate animations that draw attention

Modal open/close, sidebar toggle

CSS CUSTOM PROPERTY
transition-duration: 500ms;
TAILWIND CSS
duration-500

slow

700ms

Dramatic entrances and exits

Page transitions, hero animations

CSS CUSTOM PROPERTY
transition-duration: 700ms;
TAILWIND CSS
duration-700

slower

1000ms

Showcase animations and loading states

Skeleton screens, progress indicators

CSS CUSTOM PROPERTY
transition-duration: 1000ms;
TAILWIND CSS
duration-1000
DurationBest ForAvoid ForExamples
100msImmediate feedbackComplex animationsButton hover, tooltip
200msQuick interactionsLoading statesIcon changes, badges
300msStandard transitionsCritical alertsForm focus, cards
500msDeliberate changesFrequent interactionsModals, drawers
700msDramatic effectsUI feedbackPage transitions
1000msLoading, showcasesInteractive elementsProgress bars

Performance Tips

  • • Shorter durations feel more responsive
  • • Use faster durations for frequent interactions
  • • Consider device performance when choosing durations
  • • Test on slower devices to ensure smoothness

Accessibility

  • • Respect prefers-reduced-motion settings
  • • Provide instant alternatives for slow animations
  • • Avoid long durations for critical user flows
  • • Consider cognitive load of motion