css-animation-creator

# 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 - `references/principles-and-timing.md` — Disney 12 principles mapped to UI, duration and easing tables. - `references/transitions.md` — Transition syntax, easing functions, cubic-bezier presets, Tailwind transitions. - `references/keyframe-library.md` — Keyframe syntax plus fade, scale, bounce, rotate, slide, and attention-seeker keyframes. - `references/loading-animations.md` — Spinners, dots, skeleton loaders, shimmer, progress bars. - `references/micro-interactions.md` — Button, hover, icon, form, and success/error interactions. ...