transition: all 是性能地雷，会导致 safari 和 firefox 掉帧、卡顿甚至动画失效，因其强制检查所有可动画属性并触发重排重绘；应显式声明 transform 和 opacity 等低开销属性。

transition: all 不是懒人写法，是性能地雷。它会让 Safari 和 Firefox 在 hover、class 切换等常见场景下掉帧、卡顿，甚至动画直接不触发——不是代码没跑，是浏览器主动跳过了整条规则。

为什么 transition: all 会卡顿甚至失效

浏览器看到 all，就默认你要过渡所有可动画属性：哪怕你只改了 opacity，它仍得检查 width、margin、background-color 是否有变。这些属性一动就触发重排（reflow）或重绘（repaint），主线程立刻吃紧。

• Safari 对 all 特别敏感，轻微布局扰动（比如父容器尺寸抖动）就导致合成层降级
• Firefox 更保守：如果初始状态含 display: none 或 visibility: hidden，它可能直接忽略整个 transition 声明，DevTools Animations 面板里连时间轴都看不到
• all 还会隐式包含 top、left、height 等高开销属性，哪怕你当前 CSS 里根本没写它们

哪些属性可以放心加进 transition

真正走 GPU 合成层、不触发布局和绘制的，只有两个核心属性：transform 和 opacity。其他所谓“安全”属性都带条件。

• transform：包括 translateX、scale、rotate 等，必须是完整函数值（如 translateY(20px)），不能只写 translate
• opacity：纯透明度变化，零重排零重绘
• background-color、color：仅影响 paint 阶段，比 layout 轻，但旧版 Safari 中仍可能走主线程
• box-shadow：现代 Chrome/Firefox 可合成，但需配合 will-change: transform 或提前升层，否则易掉帧

绝对不要单独写：transition: width 0.3s、transition: margin 0.3s、transition: left 0.3s——它们强制同步计算布局，滚动时帧率肉眼可见下跌。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

如何快速定位并替换残留的 transition: all

别靠肉眼翻 CSS 文件。打开 DevTools Elements 面板，用 Cmd+F（Mac）或 Ctrl+F（Win）全局搜 transition: all 和 transition-property: all；重点检查 :hover、.active、.open、.is-visible 这类动态类。

• 运行这段脚本快速扫描：

  Array.from(document.querySelectorAll('*')).filter(el => getComputedStyle(el).transitionProperty === 'all').forEach(el => console.warn('All transition found:', el))

• Animate.css 用户注意：某些定制 build 默认启用了 all，建议查 node_modules/animate.css/animate.min.css 里是否含该字符串
• 替换时别写成 transition: transform, opacity —— 缺少时长和缓动，浏览器按默认 0s ease 处理，等于没过渡；正确写法是 transition: transform 0.3s ease, opacity 0.3s ease

用 will-change 或 translateZ(0) 前先确认必要性

加 will-change: transform 并不能挽救 transition: all 的问题，反而可能更糟：一旦 JS 后续改了 padding 或 font-size，图层缓存被破坏，触发回流 + 重绘 + 图层重建三连击。

• will-change 应只在交互前临时添加（比如 mouseenter 时 setAttribute），动画结束立即移除
• translateZ(0) 是更稳妥的升层方式，但只对已含 transform 的元素有效；纯 opacity 动画需额外加 will-change: opacity（Chrome 支持，Firefox 不推荐）
• 真正省资源的做法，是删掉一个 all，而不是加十个 will-change

最常被忽略的一点：性能瓶颈从来不在“有没有动画”，而在“浏览器有没有被逼着反复做 layout 和 paint”。显式声明属性不是为了代码好看，是给渲染引擎一条清晰的执行路径——它知道只盯哪几个值，就能把其余计算全甩给 GPU。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！