要精确控制transition-property仅对特定属性生效，关键在于显式列出目标属性名并配对设置非零transition-duration；仅mdn标注“animatable”的属性（如opacity、transform）有效，display、visibility等不可动画属性无效。

要精确控制 transition-property 仅对特定属性生效，关键在于显式列出目标属性名，避免使用 all 或遗漏必需的过渡时长设置。

明确写出需过渡的 CSS 属性名

在 transition-property 中直接写入你希望触发过渡的具体属性，多个属性用英文逗号分隔。浏览器只对这些属性值的变化应用过渡，其余属性变化仍为即时切换。

• transition-property: width, opacity, transform; —— 仅这三项变化时有过渡
• transition-property: background-color; —— 单独控制背景色渐变
• 不推荐 all，它会把所有可计算属性（如 box-shadow、border、甚至 z-index）都纳入过渡，容易引发意外动画或性能问题

确保 transition-duration 同步匹配属性顺序

当 transition-property 指定了多个属性时，transition-duration（以及 timing-function、delay）也支持用逗号分隔多个值，且顺序必须一一对应。

html-to-pptx-converter

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

下载

• transition-property: width, height, opacity;
• transition-duration: 0.3s, 0.6s, 0.2s; —— width 耗时 0.3s，height 耗时 0.6s，opacity 耗时 0.2s
• 若只写一个时间（如 0.4s），则所有属性共用该时长

注意属性是否真正“可过渡”

并非所有 CSS 属性都支持过渡。只有具有连续数值空间的属性才能平滑过渡，例如：

• ✅ 支持：width / height / opacity / color / background-color / transform / font-size / margin / padding
• ❌ 不支持：display（none ↔ block 无中间状态）、visibility（布尔切换）、z-index（整数跳变）、auto 值（如 height: auto 无法过渡）
• ⚠️ 注意：top/left 等定位属性需配合 position: relative/absolute/fixed 才能生效

用简写 transition 时保持逻辑清晰

使用 transition 简写时，属性名必须出现在第一个位置，否则会被忽略；延迟时间写在持续时间之后，顺序不能错乱。

• 正确：transition: width 0.3s ease-in, opacity 0.2s linear 0.1s;
• 错误：transition: 0.3s width ease-in;（浏览器可能忽略 width）
• 错误：transition: width 0.3s 0.1s ease-in;（0.1s 被当作 timing-function 解析，导致语法失效）