优质动效需匹配预期、控制维度、调准缓动、统一系统：延迟触发、单维变化、定制cubic-bezier曲线、定义基础时长与缓动变量，使交互“本该如此”。
交互细节廉价，往往不是因为没加动效，而是动效用得随意、生硬或过度。适度使用 transition 的关键，在于匹配用户预期、尊重界面节奏、隐藏实现痕迹——让变化“本该如此”，而不是“它在动”。
选对触发时机：别让动效抢在用户操作前
很多廉价感来自“未操作先响应”：比如悬停还没真正稳定，元素就开始缩放；或者按钮刚被鼠标划过就猛跳。这违背直觉，像系统在猜测用户意图。
- 用
transition-delay延迟 50–100ms，等用户动作明确后再启动动效 - 避免对
:hover立即应用复杂变换，优先用缓动的 opacity 或轻微位移 - 点击类交互（如按钮按压）建议用
:active+ 瞬时 transition（transition: all 0.1s），不延迟，但持续时间要短
控制变化维度：少即是质感
同时改变颜色、大小、阴影、旋转？视觉信息过载，人眼来不及解析，结果就是“花哨但廉价”。真正的质感来自克制的单一维度变化。
- 按钮悬停：只变
background-color或只加box-shadow，别两者都动 - 卡片浮起：用
transform: translateY(-2px)配合transition: transform 0.25s ease-out，比同时改 margin/border/shadow干净得多 - 图标切换：用
opacity+transform: scale(0.95)组合即可，避免加旋转或颜色突变
调准缓动曲线：别全用 ease
ease 是浏览器默认，但它太“通用”，缺乏个性和重量感。廉价感常源于所有动效千篇一律，像模板生成。
立即学习“前端免费学习笔记（深入）”；
- 入场/浮起类：用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 material 的标准缓出） - 反馈类（如按钮按压）：用
ease-in-out或更干脆的cubic-bezier(0.34, 1.56, 0.64, 1)（带点弹性收尾） - 慎用
ease-in和ease-out单独出现——它们容易显得“卡顿”或“拖沓”
统一动效系统：建立可复用的 timing scale
没有规范的 transition 容易越加越多、越来越乱。廉价感也来自不一致：这个按钮动 0.3s，那个菜单滑 0.15s，阴影扩散又用了 0.4s。
- 定义基础时长：如
--dur-fast: 0.15s（微反馈）、--dur-normal: 0.25s（主交互）、--dur-slow: 0.4s（轻量入场） - 所有 transition 都基于这三档，避免小数点后两位乱写（如 0.237s）
- 搭配统一缓动：全局推荐
--ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94)
质感不靠动效堆砌，而靠每一次变化都回答清楚三个问题：为什么动？往哪动？动多快？把 transition 当作视觉语法的一部分，不是装饰贴纸。
