过渡效果慢的核心原因是duration过长或触发时机不合理；应将transition-duration控制在0.1s–0.3s，优先使用transform/opacity，配合will-change预热和精准触发机制优化性能。
过渡效果太慢，核心问题通常出在 duration 设置过长 或 触发时机不合理，比如绑定在 hover 上却依赖鼠标缓慢移入，或在页面加载初期就提前启用了过渡，导致视觉延迟感明显。优化方向很明确：精简时间、精准触发、避免冗余。
合理缩短 transition-duration 值
CSS 过渡不是越长越“高级”，多数交互场景下 0.1s–0.3s 更符合直觉响应。超过 0.4s 就容易被感知为卡顿或延迟：
- 按钮悬停/点击反馈：推荐
transition: background-color 0.15s ease, transform 0.15s ease; - 下拉菜单展开：可用
max-height+opacity配合0.25s cubic-bezier(0.4, 0, 0.2, 1)，比单纯用 height 更顺滑 - 慎用
all 0.3s ease—— 它会让所有可变属性都过渡，包括你没意识到的box-shadow或z-index，反而拖慢渲染
用 will-change 提前告知浏览器关键属性
对频繁变化的属性（如 transform、opacity），在元素进入交互前加 will-change: transform;，能触发 GPU 加速并减少重排重绘开销：
- 只对真正需要动画的元素设置，避免滥用（否则可能引发内存占用升高）
- 最好配合 JS 动态添加/移除：
element.style.willChange = 'transform';在动画开始前设，结束后清空 - 不要写成
will-change: all;—— 浏览器无法优化，失去意义
避免在非合成属性上做过渡
改变 width、height、left、top 等会触发布局（Layout）的属性，性能远低于仅影响绘制层（Paint）或合成层（Composite）的 transform 和 opacity：
立即学习“前端免费学习笔记（深入）”；
- 把
left: 100px → 200px改成transform: translateX(100px) → translateX(200px) - 隐藏/显示用
opacity: 0/1+visibility: hidden/visible，而非display: none/block - 用
transform: scale()替代width/height缩放，保持硬件加速
控制触发条件，减少无效过渡
很多“慢”其实源于过渡被意外触发多次，或在不需要时也运行：
- 给 hover 动画加
pointer-events: none到过渡中元素的子内容上，防止鼠标移动时反复触发 - 用
:active或 JS 的touchstart/mousedown替代纯 hover 实现点击反馈，更及时 - 页面加载后首次交互前，可先用
transition: none初始化状态，再通过 class 切换启用过渡
不复杂但容易忽略 —— 把 duration 控制在 0.2s 左右、只动 transform/opacity、用 will-change 预热、让触发更贴近用户意图，体验提升立竿见影。
