CSS Animation Creator

Build production-grade, accessible, GPU-efficient motion for web UIs using CSS, Tailwind, and Framer Motion.

Workflow

1. Identify the purpose of the motion: feedback, delight, guidance, or storytelling.
2. Choose the technique: CSS transitions for state changes, keyframes for looping or multi-step motion, Framer Motion or JS for orchestration and scroll-linked effects.
3. Set timing and easing to match the interaction. Apply the timing and easing tables in references/principles-and-timing.md.
4. Author the animation. Pull ready-made keyframes and patterns from the reference files below rather than writing from scratch.
5. Constrain animated properties to transform and opacity for GPU acceleration. Apply references/performance.md.
6. Honor reduced-motion preferences for every animation. Apply references/accessibility.md.
7. Verify on low-end devices and confirm no layout thrash before shipping.

Contents