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）同理。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
必须配对声明 transition-duration
只写 transition-property: transform 是没动画的，因为浏览器按默认 transition-duration: 0s 处理，等于直接跳变。正确做法是：
- 显式写非零时间，哪怕只是
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包裹第二步操作
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
