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