使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/onewave-ai/claude-skills --skill css-animation-creator开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
仓库原始内容
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
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
transformandopacityfor GPU acceleration. Applyreferences/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.
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.references/page-transitions.md— View Transitions API, Framer Motion page and shared-layout transitions, staggered lists.references/scroll-animations.md— Intersection Observer, Framer Motion scroll hooks, native CSS scroll-driven animations.references/accessibility.md—prefers-reduced-motionCSS, Tailwind motion-safe/reduce, React hook.references/tailwind-config.md— Drop-intailwind.config.jsanimation and keyframe definitions.references/performance.md— GPU-accelerated properties,will-change,contain, performance checklist.
