h5项目应按交互类型分档设定过渡时长（微反馈0.2–0.25s、状态切换0.3–0.35s、视图迁移0.4–0.45s），禁用0.6s；缓动优先ease-out或定制cubic-bezier；属性粒度控制，避免transition:all；通过css变量、组件类和代码检查保障规则落地。
团队在 H5 项目中统一过渡时间与缓动函数，不是为了“看起来一样”，而是为了让用户对交互节奏形成稳定预期，降低认知负荷，同时兼顾性能和可维护性。关键不在定死数值，而在建立可复用、可解释、可演进的规则体系。
按交互类型分档设定 duration
避免全局写 transition: all 0.3s ease。应根据用户意图和视觉变化量分级：
- 微反馈类（图标悬停、按钮内边距微调、文字颜色变化）：0.2s–0.25s —— 快而明确，不打断操作流
- 状态切换类（开关 toggle、标签页切换、折叠面板展开）：0.3s–0.35s —— 给出清晰的“已完成”信号，又不拖沓
- 视图迁移类（页面级转场、模态框弹出、底部弹层上推）：0.4s–0.45s —— 允许用户感知空间关系变化，但不过度停留
- 禁用项：不设低于 0.15s（人眼难识别变化）、不设高于 0.6s（H5 场景下易被感知为卡顿或加载）
缓动函数优先使用 ease-out 或自定义 cubic-bezier
默认 ease（即 cubic-bezier(0.25, 0.1, 0.25, 1)）在 H5 小屏触控场景中常显得“开头太冲、结尾拖尾”。更推荐：
-
绝大多数 hover / active 状态变化：用
ease-out—— 快速响应，柔和收尾，符合手指释放后的自然停止感 -
需要轻盈/弹性感的动效（如卡片轻抬、按钮微缩放）：用
cubic-bezier(0.19, 1, 0.22, 1)或cubic-bezier(0.3, 0.1, 0.7, 0.9)—— 启动干脆，收尾有余韵 -
绝对匀速需求（如 loading 旋转、进度条推进）：显式写
cubic-bezier(0, 0, 1, 1)，比linear更兼容旧版安卓 WebView -
禁用项：避免
ease-in单独用于用户触发动作（启动迟滞易被误判为无响应）；慎用steps()除非明确需要帧动画语义（如数字翻牌）
属性粒度控制，不滥用 all
用 all 会把所有可过渡属性（包括 height、margin 等触发布局重排的属性）一并交由同一 timing function 控制，既不可控也影响性能。应：
- 只对真正需要过渡的属性声明：如
transition: background-color 0.25s ease-out, transform 0.3s cubic-bezier(0.3, 0.1, 0.7, 0.9), opacity 0.25s ease-out - 对
transform和opacity单独设置稍长 duration（如 0.3s），因它们硬件加速友好，视觉延展感更强 - 对
background-color、color等纯绘制属性保持较短 duration（如 0.2s），避免色彩变化滞后于位移
提供设计系统配套支持
标准落地靠工具，不是靠文档：
- 在 CSS 变量中定义：
--motion-duration-sm: 0.25s; --motion-duration-md: 0.3s; --motion-easing-interactive: cubic-bezier(0.19, 1, 0.22, 1); - 组件库中封装基础动效类，如
.motion-scale-in、.motion-fade，内部已绑定合规的 duration + timing-function - 在代码检查（ESLint / Stylelint）中加入规则，拦截
transition: all、duration > 0.6s、timing-function: ease（非必需场景）等违规写法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
