该技能是一份供 AI 读取的动效设计参考，提供动效的审美取向与实现技术，主要面向 Web 前端开发场景。
用途与设计原则 动效应当澄清信息，而非装饰。动作应小、快、有目的。其风格为克制：不以弹跳或弹簧式过冲作为装饰，不使用无限循环与内容争夺注意力。
主要能力
- 两类实现工具按影响匹配：纯 CSS 用于揭示与错峰入场（最廉价、无 JS），通过 animation-delay: calc(var(--i) * 60ms) 配合关键帧淡入上移实现，适用于不需要交互的首屏或列表入场；Framer Motion 用于有状态或交互式动效，包括声明式 variants 与 initial/animate、共享布局与手势，仅在 CSS 无法表达状态时优先使用。
- 强制无障碍要求：prefers-reduced-motion 为不可协商项。每个动效示例都必须遵守——通过媒体查询将动画与过渡置为 none，在 Framer Motion 中用 useReducedMotion() 控制 variants 并移除变换，使减少动效时折叠为瞬时（仅透明度或无动画）。
- 打包体积纪律：Framer Motion 较重，应使用 LazyMotion 与 m. 组件按需加载 domAnimation 功能，而非完整 motion 导入，以保持在 rules/agent/frontend-excellence.md 定义的前端性能预算内。
使用方式 作为参考指导，在编写或审查动效代码时遵循上述模式；性能上限不在此重复定义，需交叉参考 rules/agent/frontend-excellence.md，另可参阅 frontend-aesthetics 技能。
适用场景 Web 前端中的首屏/列表入场揭示、状态切换与交互反馈、路由或条件卸载的进出场动画，尤其是需要无障碍兼容与性能预算约束的项目。
限制与注意事项 发布前需审查 AnimatePresence 间隙：若离开的元素未被 <AnimatePresence> 包裹，退出动画会静默失效，需检查每个条件渲染与路由卸载；减少动效路径必须实际测试，不能仅声明。性能预算以规则文件为准，具体数值暂未提供。