CSS Motion Systems

Overview

This skill provides a production-oriented motion system for web UI work. It is focused on interaction clarity, performance, and accessibility, not decorative animation.

Use this skill to design and implement motion that:

• Preserves spatial continuity between states
• Communicates hierarchy and focus
• Uses performant properties (transform, opacity)
• Provides reduced-motion alternatives
• Uses View Transitions API intentionally for page/state continuity

When to Use