css 过渡动画太慢怎么调整_修改 transition duration 控制速度
直接修改transition-duration值可提速过渡动画，本质是降低持续时间；需注意单位（s/ms）、避免简写遗漏、检查CSS优先级与JS覆盖、搭配缓动函数及选用硬件加速属性。
直接改 transition-duration 值就能提速
过渡动画慢，本质是默认或当前设的持续时间太长。CSS 中控制快慢的核心就是 transition-duration，单位用 s（秒）或 ms（毫秒），数值越小越快。
常见误区是只调 transition 简写属性却漏掉时长，或者写了但单位写错（比如写成 0.3 没带单位，浏览器会忽略）。
-
transition-duration: 0.1s—— 适合微动效，如按钮 hover 的边框变化 -
transition-duration: 200ms—— 和0.2s等价，更直观，推荐用 ms 避免小数点误差 - 别写
transition: all 0.3，缺单位 = 无效声明 - 如果同时设了多个 transition（比如分别给
color和transform），要确保目标属性对应的 duration 明确匹配，否则会回退到默认值0s
为什么改了 transition-duration 还没变快？
优先级和覆盖关系常被忽略。即使你写了新 duration，也可能被其他规则盖掉：
- 检查是否被更具体的 CSS 选择器覆盖（比如
.btn:hover里写的 duration 被.btn.active:hover里的重置了） - 确认没有在 JS 里用
element.style.transitionDuration = '0.5s'动态覆盖了 CSS 规则 - 浏览器 DevTools 的 Computed 面板里看最终生效的
transition-duration值，不是 Styles 面板里“划掉”的那行 - 如果用了
transition: background-color 0.4s, transform 0.2s这种多属性写法，单独改某一个 duration 必须重写整条transition，不能只改简写中的某个值
搭配 transition-timing-function 让快感更自然
光缩小时长不一定够——生硬的线性加速（linear）反而显得卡顿。合理选缓动函数能让“快”更舒服：
-
ease-out：开头快、结尾慢，适合鼠标移出时收尾柔和（如菜单收起） -
ease-in：开头慢、结尾快，适合强调“弹出感”（如 tooltip 出现） -
cubic-bezier(0.2, 0.8, 0.4, 1)：自定义曲线，比ease更轻快，适合现代 UI - 避免全用
linear，除非做精确时间控制（如进度条）
button {
transition: background-color 150ms ease-out, transform 120ms cubic-bezier(0.2, 0.8, 0.4, 1);
}
注意硬件加速和重排对“感知速度”的影响
再小的 transition-duration，如果触发动画的属性引发 layout（重排），比如改 width、height、top，实际帧率可能暴跌，看起来还是慢。
- 优先用只触发合成（composite）的属性：
transform（translate/scale/rotate）、opacity - 避免对
margin、padding、left做 transition，哪怕 duration 设成50ms也卡 - 加
will-change: transform可提前提示浏览器优化，但别滥用（会增加内存开销） - 用 Chrome DevTools 的 Rendering 面板勾选 “Paint f
lashing”，看动画过程是否有意外重绘
lashing”，看动画过程是否有意外重绘
