transition属性必须写全，仅用all会导致Chrome/Safari/Firefox行为不一致；Safari中transform卡顿需加translateZ(0)或will-change；IE/Edge Legacy不支持ease-in-out等缓动函数，须用cubic-bezier()显式声明；height: auto无法参与过渡。
transition 属性必须写全，不能只写 transition: all
只用 transition: all 是导致跨浏览器行为不一致的最常见原因。Chrome 可能对未声明的属性（比如 transform 或 opacity）悄悄触发过渡，而 Safari 和 Firefox 会直接忽略——因为 all 并不包含所有可动画属性，且各浏览器对“哪些属性属于 all”的定义不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 明确列出要过渡的属性，例如：
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 避免混用
transition-property: all和单个属性声明，这会让浏览器解析逻辑更不可控 - 注意：CSS 自定义属性（
--my-var）默认不可过渡，必须配合@property显式注册（仅 Chrome 110+ / Edge 110+ 支持）
transform 动画在 Safari 中卡顿或跳变
Safari 对 transform 的硬件加速策略更保守，尤其当元素没有触发合成层（compositing layer）时，会回退到 CPU 渲染，造成掉帧或首帧延迟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制启用 GPU 合成：给过渡元素加
transform: translateZ(0)或will-change: transform - 但不要滥用
will-change—— 它会在元素进入视口前就创建图层，可能引发内存占用升高，仅对频繁动画的元素设置 - 确保
transform值使用标准函数，避免 Safari 不识别的写法，例如不用scale3d(1, 1, 1)而用scale(1)（除非真需要 Z 轴）
transition-timing-function 在 IE/Edge Legacy 中失效
IE 10–11 和旧版 Edge（EdgeHTML）不支持 cubic-bezier() 的四参数简写以外的值，比如 ease-in-out 会被降级为 ease，而 steps(3, end) 则完全不生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 关键动画一律用
cubic-bezier()显式声明缓动曲线，例如把ease-in-out替换为cubic-bezier(0.4, 0, 0.2, 1) - 如需逐帧动画（如 loading 图标），避免依赖
steps()；改用 JavaScript 控制 class 切换 + CSS 关键帧（@keyframes）更可靠 - 检查构建工具是否自动插入了
-webkit-前缀——现代 Autoprefixer 默认已不加前缀，但若项目还保留旧配置，可能干扰原生支持
/* 推荐写法：显式、可控、跨浏览器一致 */
.button {
opacity: 1;
transform: translateY(0);
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
<p>.button:hover {
opacity: 0.8;
transform: translateY(-2px);
}</p>最易被忽略的是：过渡起点和终点的属性值类型必须匹配。比如从 height: auto 过渡到 height: 100px，所有浏览器都会跳过过渡——auto 无法插值。这种问题不会报错，但效果直接消失，得靠 DevTools 的 “Animations” 面板逐帧检查实际生效的属性变化。
