CSS过渡属性transition-property_指定哪些样式参与动画

transition-Property 是白名单机制而非开关，仅对规范定义的可动画属性生效；写错值或滥用 all 会导致动画静默失效，必须与 duration 等配合且 js 动态修改时需确保 property 提前就绪。

transition-property 值写错会导致动画完全失效

它不是“开关”，而是白名单机制：只对列表里明确写出的 css 属性做过渡，其余一概忽略。常见错误是写成 transition-property: all 却期望 display 或 height（从 0 到 auto）能动——这两者根本不在可动画属性列表里。

• display 不可动画，切勿放进 transition-property；改用 visibility + opacity 组合
• height: auto 无法插值，要过渡高度得用具体数值（如 height: 0 → height: 120px）或改用 max-height
• 缩写属性如 background 或 border 不推荐直接写进 transition-property，浏览器解析不一致；拆成 background-color、border-color 更可靠

transition-property 支持的合法值有哪些

只有 CSS 规范明确定义为“可动画”（animatable）的属性才有效。MDN 的 CSS animated properties 页面是唯一可信依据，别信“网上说可以”的二手经验。

• 常用安全项：color、opacity、transform、background-color、left/top（需配合 position）、font-size
• 危险高危项：width/height（含 auto 值时失效）、margin/padding（百分比值在某些浏览器中跳变）、clip-path（safari 旧版本不支持）
• transition-property: all 看似省事，实则埋雷：一旦后续加了不可动画属性（比如 content），整个过渡链可能静默降级，连控制台都不报错

和 transition-duration / delay 搭配时的常见断点

单独设 transition-property 没用，必须和 transition-duration 同时存在才触发动画逻辑。但三者（property / duration / timing-function）的匹配规则容易被忽略。

• 如果用简写 transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)，那么每组必须严格对应一个 transition-property，顺序错一位就全乱套
• 多个属性过渡时间不同，不能靠单条 transition 简写“猜顺序”；老老实实用多行声明更可控：

  transition-property: background-color, transform;<br>transition-duration: 0.3s, 0.2s;<br>transition-timing-function: ease, cubic-bezier(0.4, 0, 0.2, 1);

• transition-delay 只作用于它所在那一组声明；混用简写和分写时，delay 容易被覆盖或遗漏

JavaScript 动态修改时 property 值丢失的坑

用 JS 改 class 或 style 触发动画时，transition-property 必须在动画开始前已生效，否则浏览器来不及建立过渡上下文。

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

• 常见错误：先改 element.style.height = '200px'，再加 class 设置 transition-property: height —— 此时动画已跳变完成，property 生效太晚
• 正确顺序：先加 class（含 transition-property 和初始状态），再用 offsetHeight 或 getComputedStyle 强制重排，最后改目标值
• 用 requestAnimationFrame 包裹第二步更稳妥，避免因渲染管线优化导致重排被合并

CSS 动画的起点从来不是“写了 transition 就动”，而是“浏览器是否认定这个属性此刻可插值”。transition-property 是那个最硬的闸门——开错缝，后面全白搭。