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