AnimationDuration [check] v1.0.0

Validates animation/transition durations fall within tasteful UI ranges (100–200ms micro, 200–400ms state, 300–600ms entrance) and flags durations > 3s as potential vestibular hazards. Also flags linear easing on interactive elements.

signature: (css: string, context?: object) -> CheckResult predicate: // Animation/transition durations must fall within tasteful UI ranges: // - Micro-interactions (hover, focus, button press): 100–200ms // - State transitions (open/close, expand): 200–400ms // - Entrance/exit (page, modal): 300–600ms // - Anything > 800ms is suspect for UI feedback. // - Anything > 3s for non-decorative motion is a vestibular hazard. decls = parseCSS(css).filter(d => d.property === 'transition-duration' || d.property === 'animation-duration' || d.property === 'transition' || d.property === 'animation' ) for d in decls: durations = extractDurations(d.value) // returns array of ms for ms in durations: if ms === 0: continue if ms < 80: yield { selector: d.selector, prop: d.property, value: d.value, ms, fail: 'too-fast', range: '80-200ms for micro' } else if ms > 800 && ms <= 3000: // Acceptable for entrance animations only — but flag if applied to interactive feedback if /:hover|:focus|:active|button|input/i.test(d.selector): yield { selector: d.selector, prop: d.property, ms, fail: 'too-slow-interactive', max: 400 } else if ms > 3000: yield { selector: d.selector, prop: d.property, ms, fail: 'vestibular-hazard', max: 3000, severity: 'high' }

// Easing check — linear easing on UI interactions feels mechanical easing = extractEasing(d.value) if easing === 'linear' && /:hover|:focus|button/.test(d.selector): yield { selector: d.selector, fail: 'linear-easing-on-interactive', remedy: 'use cubic-bezier or ease-out', severity: 'warn' }

Validates

@community/rule-animation-duration

Severity

medium

Failure Message Template

Animation '{prop}' on '{selector}' is {ms}ms — {fail}. Recommended range: {range}. Adjust duration token --duration-* to a standard scale (150ms / 250ms / 400ms).

Evaluation Method

automated

Tools

• postcss
• regex

False Positive Rate

medium

AnimationDuration [check] v1.0.0

Validates animation/transition durations fall within tasteful UI ranges (100–200ms micro, 200–400ms state, 300–600ms entrance) and flags durations > 3s as potential vestibular hazards. Also flags linear easing on interactive elements.

signature: (css: string, context?: object) -> CheckResult predicate: // Animation/transition durations must fall within tasteful UI ranges: // - Micro-interactions (hover, focus, button press): 100–200ms // - State transitions (open/close, expand): 200–400ms // - Entrance/exit (page, modal): 300–600ms // - Anything > 800ms is suspect for UI feedback. // - Anything > 3s for non-decorative motion is a vestibular hazard. decls = parseCSS(css).filter(d => d.property === 'transition-duration' || d.property === 'animation-duration' || d.property === 'transition' || d.property === 'animation' ) for d in decls: durations = extractDurations(d.value) // returns array of ms for ms in durations: if ms === 0: continue if ms < 80: yield { selector: d.selector, prop: d.property, value: d.value, ms, fail: 'too-fast', range: '80-200ms for micro' } else if ms > 800 && ms <= 3000: // Acceptable for entrance animations only — but flag if applied to interactive feedback if /:hover|:focus|:active|button|input/i.test(d.selector): yield { selector: d.selector, prop: d.property, ms, fail: 'too-slow-interactive', max: 400 } else if ms > 3000: yield { selector: d.selector, prop: d.property, ms, fail: 'vestibular-hazard', max: 3000, severity: 'high' }

// Easing check — linear easing on UI interactions feels mechanical easing = extractEasing(d.value) if easing === 'linear' && /:hover|:focus|button/.test(d.selector): yield { selector: d.selector, fail: 'linear-easing-on-interactive', remedy: 'use cubic-bezier or ease-out', severity: 'warn' }

Validates

@community/rule-animation-duration

Severity

medium

Failure Message Template

Animation '{prop}' on '{selector}' is {ms}ms — {fail}. Recommended range: {range}. Adjust duration token --duration-* to a standard scale (150ms / 250ms / 400ms).

Evaluation Method

automated

Tools

• postcss
• regex

False Positive Rate

medium

Validates

@community/rule-animation-duration

Severity

medium

Failure Message Template

Animation '{prop}' on '{selector}' is {ms}ms — {fail}. Recommended range: {range}. Adjust duration token --duration-* to a standard scale (150ms / 250ms / 400ms).

Evaluation Method

automated

Tools

• postcss
• regex

False Positive Rate

medium