该技能是一份面向 Web 界面动效与微动画的工程实践指南，重点在于把“动效决策”落成可执行的技术选择与性能约束，而非单纯堆叠动画效果。
用途与定位：用于为网页交互添加恰到好处的过渡与反馈，使界面显得响应及时、有意图感。资料强调动效应让用户感知到“流畅”，而非注意到“某个元素在弹跳”。
选型决策：资料给出按复杂度与性能选择库的路径。简单过渡（悬停、淡入、滑动）优先用 CSS transitions/animations，体积小、硬件加速，可覆盖约 80% 需求；需要布局动画、手势或复杂序列时，React 项目用 Framer Motion（自动布局动画、AnimatePresence、内置弹簧物理），非 React 用 GSAP（控制力与性能强、ScrollTrigger、复杂时间线编排）；仅做滚动驱动效果且浏览器较新（Chrome 115+）可用 CSS 滚动驱动动画，零 JS 开销、脱离主线程，需兼容旧浏览器则用 GSAP ScrollTrigger；跨页面过渡且有共享元素用 View Transitions API，否则用 CSS 动画配合导航事件。
时序与物理参数：按目的给时长区间——即时反馈 100-150ms ease-out；状态确认 200-250ms ease-in-out；内容展开 300-400ms 弹簧；大幅上下文切换 400-600ms；后台活动 1.5-2s 循环或跟随真实进度。弹簧参数按交互类型给出：快捷控件 stiffness 400、damping 28；平滑面板 200/24；趣味元素 300/15；重型元素 120/20、mass 1.5；手势驱动 300/20 并继承速度。
常见故障与修复：布局抖动（动画 width/height/margin/top 等触发重排，应只动 transform、opacity、filter、clip-path，用 scale 代替尺寸变化）；弹簧振荡过久（damping 过低或 stiffness 过高，交互元素 damping ≥20，用真机测试）；动画混乱（缺少舞台层次，应错峰 40-80ms、先动主元素、同屏最多 1-2 组）；无障碍违规（必须提供 prefers-reduced-motion 降级）；包体膨胀（简单效果用 CSS，重库懒加载，关注 Core Web Vitals）。
示例：资料以卡片悬停为例，对比错误做法（改宽高、边距、边框）与正确做法（仅 transform 位移/缩放加 box-shadow，200ms ease-out，will-change 提示，并在减少动态偏好下移除位移、保留阴影变化），并用 DevTools Performance 验证无 Layout 块、中端移动设备保持 60fps。
质量门槛：60fps、交互动画 100-500ms、弹簧过冲 0-10% 且 UI 控件 damping ≥20、提供减少动态替代方案、仅动画 GPU 友好属性、错峰层次、动画库懒加载或关键路径 <20KB、交互含 focus-visible 平滑过渡、物理动画 600ms 内完成、对不支持特性做优雅降级。
适用场景与限制：适合前端界面、React 或原生 JS 项目的交互动效实现与性能排查；不适用于 Canvas/WebGL 3D 与粒子、SVG 插画动画、视频与动态图形制作、原生移动端动画、游戏动画；性能优化、复杂滚动交互与设计系统规范应分别交由对应专门技能处理。