过渡卡顿主因是duration超200ms导致反馈延迟，移动端尤甚；推荐100–150ms配合cubic-bezier快启缓收，禁用all过渡，须适配prefers-reduced-motion。
过渡时间卡顿是因为 duration 设为 500ms 以上
用户点击后等半秒才看到反馈，感知上就是“卡”或“迟钝”。CSS transition 的 duration 超过 300ms 就容易触发人眼的延迟判断阈值。移动端尤其明显——手指松开和视觉响应之间超过 200ms，用户会下意识再点一次。
-
200ms是多数交互（如按钮 hover、菜单展开）的舒适上限 -
100–150ms更适合高频操作（开关切换、标签页切换） - 若用
cubic-bezier(0.4, 0, 0.2, 1)这类缓动，可适当放宽到250ms，但别碰300ms+
别只改 duration，要配合 timing-function 微调
单纯把 duration 从 400ms 压到 150ms 可能导致动画生硬、闪烁。关键在让初始帧响应快、末尾收得稳。
- 避免默认的
ease（起慢+收慢），它放大了短时间内的“拖沓感” - 按钮点击推荐：
transition-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);—— 快启+缓收，比ease-in-out更跟手 - 开关类控件（如
input[type="checkbox"]+ label）用linear反而更干脆，尤其duration: 120ms
用 prefers-reduced-motion 检测用户偏好
有些用户系统开启了“减少动画”，硬设 transition 会覆盖系统设置，反而违反可访问性规范。
- 必须加媒体查询兜底：
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01s; } } - 更稳妥的做法是：先全局关掉过渡，再对关键交互显式开启（比如只给
.btn:active加transition: background-color 100ms;） - 别在 JS 里用
getComputedStyle(el).transitionDuration判断——它不反映媒体查询生效状态
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01s !important;
}
}
transition-property 不写 all，只交待关键属性
写 transition: all 200ms; 看似省事，实则埋雷：一旦后续 CSS 新增了 box-shadow 或 filter，这些重绘成本高的属性也会被过渡，直接拖慢帧率。
立即学习“前端免费学习笔记（深入）”；
- 按钮颜色变化 →
transition: background-color 150ms, color 150ms; - 卡片浮起效果 →
transition: transform 180ms, box-shadow 180ms; - 绝对定位元素位移 → 只过渡
transform，别碰top/left（会触发 layout）
过渡不是越快越好，而是让「用户意图」和「界面反馈」之间的延迟低于感知阈值。最常被忽略的是 timing-function 和 property 的组合选择——它们比 duration 数值本身更能决定“顺不顺”。
