transition在Safari/旧Edge不生效主因是属性不支持过渡或触发时机不当；应明确列出可动画属性、避免all简写、强制重排、慎用will-change，并注意浏览器版本差异。
transition 属性在 Safari 或旧版 Edge 不生效
多数情况是 CSS transition 写法本身没问题，但目标属性不支持过渡，或浏览器对某些值的解析存在差异。Safari（尤其 iOS 15 及更早）和旧版 Edge（EdgeHTML 内核）对 transform、opacity 等属性的过渡支持较严格，且不接受简写中混用不支持过渡的属性。
- 避免在
transition简写中写all，改用明确列出可过渡属性，例如：transition: opacity 0.3s, transform 0.3s; - Safari 对
transform: scale(1)→scale(1.2)支持良好，但对transform: translateX(0px)→translateX(10px)在某些 flex 容器中可能跳变，建议加will-change: transform;提前提示渲染引擎 - 旧版 Edge 不支持
transition作用于自定义 CSS 变量（--my-color），需回退为直接控制color或background-color
触发 transition 的状态变更没被浏览器识别
常见于 JS 动态添加 class 后立即修改样式，或 DOM 更新未触发重排（reflow）。浏览器可能合并操作，跳过中间状态，导致过渡不播放。
- 确保 class 切换与样式变更之间有微小延迟，例如用
setTimeout(() => { element.classList.add('active'); }, 0); - 更可靠的做法是强制触发重排：在添加 class 后读取一次
offsetHeight或getComputedStyle(element).opacity，让浏览器“确认当前状态”再开始过渡 - 避免在同一个事件循环中连续设置
element.style.transition = '...'和element.style.transform = '...'，应先设好 transition，再通过 class 或 style 更改可动画属性
使用 will-change 导致 Chrome 正常但 Firefox/Safari 卡顿或失效
will-change 是提示性属性，不是动画开关。过度或错误使用反而会禁用硬件加速，或在部分 Safari 版本中导致过渡完全不触发。
- 只对真正需要频繁动画的元素设置
will-change: transform;或will-change: opacity;，不要设will-change: all; - Safari 16.4+ 修复了部分
will-change与transition冲突问题，但 iOS 15 及更早仍建议移除该声明后测试 - 若过渡在 Firefox 中失效，检查是否同时设置了
contain: paint;—— 某些版本 Firefox 会因此忽略 transition，临时移除可验证
/* 推荐的跨浏览器过渡写法示例 */
.button {
opacity: 0.7;
transform: scale(1);
transition: opacity 0.2s ease, transform 0.2s ease;
/* 不加 will-change，除非实测必要 */
}
.button:hover {
opacity: 1;
transform: scale(1.05);
}兼容性问题往往卡在“看起来该动却不动”的那一帧，重点盯住触发时机、属性支持范围和浏览器私有行为差异。
立即学习“前端免费学习笔记（深入）”；
