17370845950

优质动效需匹配预期、控制维度、调准缓动、统一系统：延迟触发、单维变化、定制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 当作视觉语法的一部分，不是装饰贴纸。