CSS过渡需显式声明transition-property（仅对MDN标注✅的属性生效）、配对非零transition-duration，避免all/简写污染，禁用auto值与无效属性，JS触发时需强制重排。

要让 CSS 过渡只对特定属性生效、避免全局影响和性能开销，核心是“显式声明 + 精准控制”。靠 transition: all 或简写漏掉关键子属性，不仅容易误触低效动画，还会在 Safari、旧 WebView 中失效，甚至引发卡顿。

只写真正可动画的属性名

transition-property 不是“写了就动”，它只对 MDN 标注 ✅ Animatable 的属性起作用。常见可用项包括：

• opacity（0 → 1 完全支持，GPU 加速）
• transform（推荐替代 left/top/width/height，性能最优）
• background-color / color（避免 transparent ↔ rgba() 跨模型切换）
• width / height（起止值都不能是 auto，单位需一致）
• margin / padding（不能混用 % 和 px，否则跳变）

display、visibility、z-index、font-family 等写进去也无效，浏览器静默忽略，不报错也不警告——拼错属性名（如 opactiy）同理。

必须配对声明 transition-duration

只写 transition-property: transform 是没动画的，因为浏览器按默认 transition-duration: 0s 处理，等于直接跳变。正确做法是：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 显式写非零时间，哪怕只是 0.01s
• 多个属性对应多个时长时，顺序严格一一对应：transition-property: transform, background-color; transition-duration: 0.25s, 0.3s;
• 避免用简写 transition: transform 0.25s;，它会覆盖其他 transition 子属性，导致意外丢失

避开简写属性和继承污染

像 margin、padding、border、font 这类简写属性，一旦状态变化，会触发内部多个子属性更新，可能造成不可控过渡。更稳妥的是：

• 改用单个物理属性，比如只动 margin-top 就只写它
• 父级若用了 transition: all，子元素必须显式重置：transition-property: none; 或明确列出所需属性，防止被“带偏”
• hover 循环抖动？别用 height: auto 配 transition，改用 max-height + 固定值模拟

JS 触发时确保重排生效

用 JavaScript 动态改样式（比如 class 切换后立刻改 transform），有时过渡不启动，是因为浏览器把两次修改合并了。可强制重排来解决：

• 在设置新样式前，读一个布局属性：el.offsetHeight;
• 或加 setTimeout(() => { /* 应用新样式 */ }, 0);
• 更现代方案：用 requestAnimationFrame 包裹第二步操作