必须显式列出属性名，如transition: color 0.3s, background-color 0.3s, transform 0.3s ease；不能依赖all，否则旧版Safari等浏览器中transform、opacity等属性会失效或跳变，且可能意外触发box-shadow等非预期动画。
能，但必须显式列出属性名，不能只靠 all 蒙混过关——否则在 Safari 12 之前、或动了 transform/opacity 时，动画会直接失效或跳变。
transition 多属性写法必须带属性名
浏览器不会自动“猜”你要过渡哪些属性。写 transition: all 0.3s 看似省事，实则埋雷：旧版 Safari 忽略 transform，部分 Android WebView 对 opacity 不触发过渡，box-shadow 或 z-index 还可能意外参与动画导致闪烁。
- 正确写法是明确列出：
transition: color 0.3s, background-color 0.3s, transform 0.3s ease; - 所有逗号分隔的项都必须含「属性名 + 时长」，
timing-function和delay可选但建议写全，避免继承默认值引发不一致 - 漏掉某个属性（比如忘了
transform），它就立刻跳变，毫无过渡——这不是 bug，是设计使然
多个属性用不同时间或缓动函数
每个逗号项独立解析，互不影响。你可以让 transform 动得快些，color 变得慢些，且缓动曲线各不相同：
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
color 0.4s linear,
opacity 0.3s ease-in;
-
delay也按顺序匹配：transition: width 0.3s, background-color 0.3s 0.1s→ 背景色延迟 0.1s 开始 - 不要混用
all和具体属性，例如transition: all 0.3s, opacity 0.5s—— 解析结果不可预测，Chrome 和 Firefox 行为可能不同 - 想临时禁用某一个属性？删掉它那一项就行；想彻底关掉所有过渡，用
transition-property: none，不是transition: none（后者无效）
哪些属性能过渡、哪些不能碰
只有「有中间值、可计算」的属性才支持过渡。像 display、z-index、font-family 这类离散型属性，写了也白写。
立即学习“前端免费学习笔记（深入）”；
- 安全高优：
opacity、transform（scale、translate、rotate）——触发光栅化，GPU 加速，不触发重排 - 谨慎使用：
width、height、left、top—— 触发 layout，卡顿风险高；height: auto根本无法过渡，得换max-height或transform: scaleY() - 别碰：
display、visibility（虽可过渡但无中间态）、position（本身不动画，top/left才算）
transition 规则叠加时以最后声明为准
CSS 层叠规则照常生效。后写的 transition 会完整替换前面的，不是合并。
.card { transition: color 0.2s; }
.card.open { transition: transform 0.3s, box-shadow 0.3s; }
- 此时
.card.open元素的color变更将**无任何过渡**——因为整条transition声明被替换了 - 解决方法只有一个：把所有要过渡的属性写进同一个声明里，比如
transition: color 0.2s, transform 0.3s, box-shadow 0.3s; - 用 JS 切换 class 控制开关时，确保开关类里写的是
transition-property: none，而不是transition: none（后者语法错误，会被忽略）
真正麻烦的从来不是怎么写多属性过渡，而是忘记 transform 在旧 Safari 里不被 all 涵盖，或者误以为 height: auto 能平滑展开——这些点不查 DevTools 的 Animations 面板，光看效果根本发现不了。
