# `react-doctor/no-long-transition-duration`

Keep UI transitions under 1s — 100-150ms for instant feedback, 200-300ms for state changes, 300-500ms for layout changes. Use longer durations only for page-load hero animations

- **Category:** Performance
- **Severity:** warn
- **Source:** oxlint-plugin-react-doctor
- **Framework:** global
- **Enabled when:** always

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the longest duration parsed from transitionDuration, animationDuration, transition, or animation exceeds 1000ms. The rule splits comma-separated segments and uses the maximum. False positive: deliberate page-load hero, intro, parallax, or ambient loop animations that are intentionally long.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Trim UI feedback transitions to 100-300ms (200ms is a safe default); layout shifts can go to roughly 500ms. Long durations are only appropriate for one-shot hero or onboarding animations, never repeated micro-interactions like hovers. See https://www.nngroup.com/articles/response-times-3-important-limits/