技能介绍

要解决什么问题

前端动效很容易变成「好看但难维护」：同一页面混用多套动画库、用 width/height 触发布局抖动，或在后台表格上堆视差和滚动劫持，最终拖慢首屏、干扰扫描效率，还会在 prefers-reduced-motion 下完全不可用。loading、toast、错误提示若只靠动效表达，也会掩盖真实状态缺失。

技能如何工作

本技能把动效当成状态沟通的一部分，而不是装饰层。流程上先写清动效服务的用户意图（定位、反馈、层级、叙事或品牌记忆），再按场景选技术路线：

CSS transition/keyframes：hover、focus、简单入场与小型反馈
Framer Motion：React 状态驱动、布局过渡与列表编排
GSAP：时间轴、滚动触发与跨元素序列
Lottie：设计导出的图标/空状态，按需懒加载
CSS scroll-driven animation：在可接受渐进增强时使用

同时用 Level 1–7+ 定义强度：工具型界面默认克制（150–250ms 的 opacity/transform），展示页才逐步加入 stagger、spring、视差或滚动叙事，且高等级必须单独做移动端与 reduced-motion 降级。性能边界强调只高频动画 transform/opacity，重型库动态导入，滚动用 IntersectionObserver 或 ScrollTimeline 而非同步读写布局。

适用边界

同一元素不要混用 Framer Motion 与 GSAP；不为普通配置页默认加大幅视差；不把大型 Lottie 或 3D 场景打进首屏同步包；动效不能改变阅读顺序、焦点顺序或键盘可达性。skeleton 不应长期掩盖加载失败——超时应进入可理解的 loading、retry 或 error。交付时需在三档视口、reduced motion 与性能面板上验证遮挡、bundle 膨胀与掉帧。