Animation & Motion Skill

This skill covers CSS animations and transitions with a focus on accessibility (respecting user motion preferences) and performance (avoiding jank and layout thrashing).

Related: For CSS-only interactive patterns (tabs, accordions, toggles without JavaScript), see the progressive-enhancement skill.

Philosophy

Motion should be:

1. Purposeful - Guides attention, shows relationships, provides feedback
2. Respectful - Honors prefers-reduced-motion preferences
3. Performant - Uses compositor-only properties when possible
4. Subtle - Enhances, doesn't distract or overwhelm

Reduced Motion First