用途
这是一个网页动画设计与实现的技能指南，基于 Emil Kowalski 的“Animations on the Web”课程内容。它用于在用户询问动画、动效相关问题时提供专业建议，帮助创建自然、有目的性的网页动画。
主要能力
该技能覆盖动画设计的多个核心维度：
缓动曲线选择：提供 ease-out、ease-in-out、ease、linear、ease-in 等缓动类型的使用场景与具体 cubic-bezier 值。例如，元素进入或退出视口时使用 ease-out，屏幕上元素移动时使用 ease-in-out，悬停或颜色过渡使用 ease。
时间与时长控制：给出微交互（100-150ms）、标准 UI（150-250ms）、模态框与抽屉（200-300ms）的时长建议，并强调 UI 动画应保持在 300ms 以下。
弹簧动画：介绍弹簧动画的适用场景（拖拽交互、可中断手势、有机界面），并提供 Apple 推荐的 duration + bounce 配置方式以及传统物理参数配置。
性能优化：强调只对 transform 和 opacity 做动画，避免对 padding、margin、height、width 等触发布局的属性做动画，并提供 will-change、Framer Motion 硬件加速等优化技巧。
无障碍支持：要求为每个动画元素添加 prefers-reduced-motion 媒体查询，并在 Framer Motion 中使用 useReducedMotion 钩子。
审查格式：审查动画时要求使用 markdown 表格，列出 Before 和 After 两列，每行一个问题。
使用方式
当技能首次被调用且没有具体问题时，仅回复指定内容。当用户提出动画相关问题时，根据缓动决策流程图和快速入门问题（元素是进入还是退出、是否在屏幕上移动、是否是悬停/颜色过渡、用户是否每天看到 100 次以上）给出建议。审查动画时使用 markdown 表格格式。
适用场景
适用于网页动画的设计与实现指导，包括进入/退出过渡、状态变化、用户操作反馈、悬停效果、拖拽交互等场景。同时区分营销页面（可更精细、时长更长）和产品界面（快速、有目的、不花哨）。
限制
该技能不提供收费、价格或平台信息。具体实现细节可参考 PRACTICAL-TIPS.md 文件。