css-animation-creator

CSS 动画创建器

使用 CSS、Tailwind 和 Framer Motion 为 Web UI 打造可用于生产环境、无障碍且 GPU 高效的动效。

工作流

1. 明确动效的目的：反馈、惊喜、引导或讲述故事。
2. 选择实现方式：状态变化使用 CSS 过渡；循环或多步骤动效使用关键帧；编排动效或实现与滚动联动的效果则使用 Framer Motion 或 JS。
3. 设置与交互相匹配的时长和缓动。应用 references/principles-and-timing.md 中的时长和缓动表。
4. 编写动画。优先从下方的参考文件中选用现成的关键帧和模式，而不是从头编写。
5. 将动画属性限制为 transform 和 opacity，以实现 GPU 加速。应用 references/performance.md。
6. 所有动画都要遵循减少动态效果偏好设置。应用 references/accessibility.md。
7. 发布前，在低端设备上验证，并确认不会发生布局抖动。

内容

• references/principles-and-timing.md — 将迪士尼 12 项原则映射到 UI，以及时长和缓动表。
• references/transitions.md — 过渡语法、缓动函数、cubic-bezier 预设和 Tailwind 过渡。
• references/keyframe-library.md — 关键帧语法，以及淡入淡出、缩放、弹跳、旋转、滑动和吸引注意力的关键帧。
• references/loading-animations.md — 加载旋转图标、圆点、骨架屏、闪光效果、进度条。
• references/micro-interactions.md — 按钮、悬停、图标、表单以及成功／错误交互。
• references/page-transitions.md — View Transitions API、Framer Motion 页面与共享布局过渡、列表交错动效。
• references/scroll-animations.md — Intersection Observer、Framer Motion 滚动钩子、原生 CSS 滚动驱动动画。
• references/accessibility.md — prefers-reduced-motion CSS、Tailwind motion-safe/reduce、React 钩子。
• references/tailwind-config.md — 可直接使用的 tailwind.config.js 动画和关键帧定义。
• references/performance.md — GPU 加速属性、will-change、contain、性能检查清单。