用途:为网页与各类用户界面提供有目的、性能友好的动画与动效设计指导,适用于微交互、页面切换、加载状态等 UI 动画场景。
主要能力:阐述适用于 UI 的动画原则(时间、缓动、预备动作、跟随动作等);给出时长参考,如即时 0-100ms、快速 100-200ms、标准 200-300ms、慢速 300-500ms、刻意 500ms 以上,并说明距离越长时间越长的规则;解释 linear、ease-out、ease-in、ease-in-out、ease-out-back 等缓动及对应 cubic-bezier 值;覆盖按钮状态、开关、复选框等微交互,骨架屏与加载指示器,页面交叉淡入、滑动与共享元素过渡,以及列表交错入场和重排(FLIP);强调只用 transform、opacity 等 GPU 加速属性以避免布局抖动;提供 prefers-reduced-motion 处理与 WCAG 相关注意点,并简述移动端触摸反馈与平台惯例;还列出设计令牌(时长、缓动变量)和动画检查清单。
必要用法:以 CSS 过渡与关键帧为主,配合 Web Animations API;复杂或精确动画可用 GSAP、Framer Motion 等库,文中给出相应示例片段。
限制:资料为通用指导,未提供安装命令、收费或价格信息;效果与兼容性视具体项目和设备而定,需自行测试。