transition简写必须包含时长，缺则无效；禁用all，应显式声明属性；transition须写在默认状态而非:hover；多属性过渡需逗号分隔且顺序对应；transitionend事件会按属性分别触发。
transition简写必须带时长，漏掉就等于没写
很多人加了transition却没动画，第一反应是“浏览器bug”，其实只是transition里缺了时间值。比如写成transition: opacity linear;，浏览器会直接忽略整条规则——因为duration是必需项，不能省略。
正确写法必须包含属性、时长、缓动函数三者（延迟可选）：transition: opacity 0.2s ease;。如果只过渡一个属性，可以省略缓动函数，它会自动 fallback 到ease；但时长绝对不能少，否则等于没声明过渡。
-
transition: opacity 0.2s;✅ 有效（缓动默认ease） -
transition: opacity ease;❌ 无效（缺时长） -
transition: all 0.3s;⚠️ 能动，但风险高（见下一条）
别用transition-property: all，它会偷偷拖慢页面
all看起来省事，实际是性能陷阱。它会让所有可动画属性（哪怕你没改）都进入过渡监听队列。比如你只改了background-color，但color、border-color、box-shadow也在同一帧被强制插值，可能引发重绘抖动，尤其在低端安卓机或 iOS Safari 上更明显。
真正可控的做法是显式列出关键属性：transition-property: opacity, transform, background-color;。这样改border或font-size完全不影响，调试时也一眼能定位是谁在动。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 安全首选：
transform、opacity（GPU 加速，不触发重排） - 谨慎使用：
max-height（需设具体数值，不能用auto）、color - 绝对避免：
display、height（auto）、margin、padding（写了也不动，还占资源）
transition必须写在默认状态，不是:hover里
鼠标悬停时动画正常，一移开就“啪”地跳回——这是最典型的配置错误。根源是把transition写进了:hover选择器，导致离开时规则消失，浏览器直接丢弃动画逻辑。
正确做法是把transition放在基础类中，确保进和出都受控：.btn { transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1); }，再单独写.btn:hover { background-color: #1E5799; }。
- 错误写法：
.btn:hover { transition: background-color 0.25s; }→ 移出无动画 - 正确写法：
.btn { transition: background-color 0.25s; }→ 进出都有 - JS 控制时同理：transition 必须在 class 切换前就存在，不能等 JS 改完 class 再加
多个属性过渡要逗号分隔，顺序必须严格对应
想同时过渡透明度和位移，得写成：transition: opacity 0.2s linear, transform 0.4s ease-in-out;。这里不是“属性列表”，而是多组独立规则，浏览器按逗号切分后逐组解析。
常见翻车点：漏掉某组的时长，或混用简写和单独属性。比如同时写了transition: opacity 0.2s;和transition-duration: 0.5s;，后者会覆盖前者的时间值，导致opacity变成 0.5s 而非预期的 0.2s。
- ✅ 正确：
transition: opacity 0.2s, transform 0.4s cubic-bezier(0.2,0.8,0.4,1); - ❌ 错误：
transition: opacity, transform 0.3s;→opacity没时长，等于没过渡 - ⚠️ 危险：
transition: opacity 0.2s; transition-duration: 0.5s;→ 后者覆盖前者
transitionend事件会为每个过渡属性各触发一次。如果你监听了transitionend却没检查event.propertyName，改个transform的同时opacity也在动，回调就会执行两次——状态容易错乱，而且没法预判哪次先来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
