Css Animation Creator

This is a comprehensive reference for building UI animations with CSS. You get Disney's 12 principles adapted for interfaces, timing guidelines for everything from micro-interactions to page transitions, and a solid library of ready-to-use keyframes covering fades, bounces, scales, and rotations. The easing function examples include Material Design's standard curves and some nice elastic effects. What makes this useful is the specificity: it tells you to use 150-250ms for button hovers with ease, or 200-300ms for modal opens with ease-out, plus it includes Tailwind examples alongside vanilla CSS. It also respects prefers-reduced-motion, which matters for accessibility. Good for both learning animation fundamentals and grabbing production-ready snippets.

skills.sh installs: 830
GitHub stars: 422
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add onewave-ai/claude-skills --skill css-animation-creator --agent claude-code

Installs into .claude/skills of the current project.

Files

CSS Animation Creator

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

Workflow

Identify the purpose of the motion: feedback, delight, guidance, or storytelling.
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.
Set timing and easing to match the interaction. Apply the timing and easing tables in references/principles-and-timing.md.
Author the animation. Pull ready-made keyframes and patterns from the reference files below rather than writing from scratch.
Constrain animated properties to transform and opacity for GPU acceleration. Apply references/performance.md.
Honor reduced-motion preferences for every animation. Apply references/accessibility.md.
Verify on low-end devices and confirm no layout thrash before shipping.