review-animations

Review CSS animations by checking easing curves, durations under 300ms, transform-origin correctness, and GPU-only properties like transform and opacity. This Skill automates that review against ten non-negotiable standards and returns a findings table with a Block or Approve verdict.

UI animations should stay under 300ms. Button press feedback runs 100-160ms, tooltips 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Anything slower on a UI element needs explicit justification.

Use CSS transitions, @starting-style, or WAAPI for predetermined motion since they run off the main thread. Use Framer Motion springs for dynamic, interruptible, gesture-driven motion, but avoid x/y/scale shorthand props which are not hardware-accelerated.

ease-in starts slow, delaying the exact moment the user is watching, so a 200ms ease-in feels slower than a 200ms ease-out. Entering and exiting elements should use ease-out or a strong custom cubic-bezier curve instead.

Honor prefers-reduced-motion by keeping opacity and color transitions while dropping transform-based movement, rather than removing all animation. Also gate hover animations behind @media (hover: hover) and (pointer: fine) to avoid false hovers on touch devices.

Remove animations on keyboard-initiated actions or elements seen 100+ times per day, since repeated motion makes interfaces feel slow. The remedial hierarchy prefers deleting purposeless animation first, then reducing, fixing easing, or correcting origin before polishing.