动画最佳实践指南Skill emilkowal-animations

---

name: emilkowal-animations description: Emil Kowalski的Web界面动画最佳实践。在编写、审查或实现React、CSS或Framer Motion中的动画时使用。触发涉及过渡、缓和、手势、toasts、drawers或motion的任务。

Emil Kowalski 动画最佳实践

基于Emil Kowalski教学的综合Web界面动画指南，开源库（Sonner, Vaul），以及他的animations.dev课程。包含7个类别中的43条规则，按影响优先级排序。

何时应用

在以下情况参考这些指南：

• 向React组件添加动画
• 选择缓和曲线或定时值
• 实现基于手势的交互（滑动、拖拽）
• 构建toast通知或drawer组件
• 优化动画性能
• 确保动画可访问性

按优先级的规则类别

优先级	类别	影响	前缀
1	缓和选择	关键	ease-
2	定时与持续时间	关键	timing-
3	属性选择	高	props-
4	变换技术	高	transform-
5	交互模式	中高	interact-
6	战略动画	中	strategy-
7	可访问性与润色	中	polish-

快速参考

1. 缓和选择（关键）

• ease-out-default - 使用ease-out作为默认缓和
• ease-custom-curves - 使用自定义cubic-bezier而非内置CSS
• ease-in-out-onscreen - 使用ease-in-out进行屏幕上移动
• ease-spring-natural - 使用弹簧动画实现自然运动
• ease-ios-drawer - 使用iOS风格缓和用于drawer组件
• ease-context-matters - 根据动画上下文匹配缓和

2. 定时与持续时间（关键）

• timing-300ms-max - 保持UI动画在300ms以下
• timing-faster-better - 更快的动画提升感知性能
• timing-asymmetric - 使用非对称定时用于按下和释放
• timing-tooltip-delay - 延迟初始工具提示，即时后续
• timing-drawer-500ms - 使用500ms持续时间用于drawer动画

3. 属性选择（高）

• props-transform-opacity - 仅动画变换和透明度
• props-hardware-accelerated - 在主线程忙碌时使用硬件加速动画
• props-will-change - 使用will-change防止1px偏移
• props-avoid-css-variables - 避免CSS变量用于拖拽动画
• props-clip-path-performant - 使用clip-path实现布局无关的揭示

4. 变换技术（高）

• transform-scale-097 - 按下时将按钮缩放到0.97
• transform-never-scale-zero - 永远不要从scale(0)动画
• transform-percentage-translate - 使用百分比值用于translateY
• transform-origin-aware - 使动画原点感知
• transform-scale-children - 缩放变换影响子元素
• transform-3d-preserve - 使用preserve-3d用于3D变换效果

5. 交互模式（中高）

• interact-interruptible - 使动画可中断
• interact-momentum-dismiss - 使用动量基础驳回
• interact-damping - 在边界处阻尼拖拽
• interact-scroll-drag-conflict - 解决滚动和拖拽冲突
• interact-snap-points - 实现速度感知的捕捉点
• interact-friction-upward - 允许有摩擦的向上拖拽
• interact-pointer-capture - 使用指针捕获用于拖拽操作

6. 战略动画（中）

• strategy-keyboard-no-animate - 永远不要动画键盘初始化的动作
• strategy-frequency-matters - 在动画前考虑交互频率
• strategy-purpose-required - 每个动画必须有目的
• strategy-feedback-immediate - 对所有动作提供即时反馈
• strategy-marketing-exception - 营销网站是例外

7. 可访问性与润色（中）

• polish-reduced-motion - 尊重prefers-reduced-motion
• polish-opacity-fallback - 使用透明度作为减少运动的后备
• polish-framer-hook - 在Framer Motion中使用useReducedMotion钩子
• polish-dont-remove-all - 不要为减少运动移除所有动画
• polish-blur-bridge - 使用模糊桥接动画状态
• polish-clip-path-tabs - 使用clip-path用于标签过渡
• polish-toast-stacking - 使用缩放和偏移实现toast堆叠
• polish-scroll-reveal - 在适当阈值触发滚动揭示动画
• polish-hover-gap-fill - 填充可悬停元素之间的间隙
• polish-stagger-children - 错开子动画用于编排

关键值参考

值	用途
cubic-bezier(0.32, 0.72, 0, 1)	iOS风格drawer/sheet动画
scale(0.97)	按钮按下反馈
scale(0.95)	最小进入缩放（永远不要scale(0)）
200ms ease-out	标准UI过渡
300ms	UI动画的最大持续时间
500ms	Drawer动画持续时间
0.11 px/ms	动量驳回的速度阈值
100px	滚动揭示视口阈值
14px	Toast堆叠偏移

参考文件

文件	描述
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息