Skip to main content

require-reduced-motion-for-expensive-animations

Require a prefers-reduced-motion: reduce override when expensive transition or keyframe properties are used.

What this catchesโ€‹

  • layout or paint properties in transition
  • transition: all
  • expensive properties inside @keyframes

Rule optionsโ€‹

OptionDefaultWhy
ignoreProperties[]Allows explicit exceptions where a project has reviewed motion behavior.
{
"css-performance-budget/require-reduced-motion-for-expensive-animations": [
true,
{ "ignoreProperties": ["background-color"] }
]
}