transition仅支持可计算且有中间值的CSS属性，如color、opacity、transform、width、height、background-color；display、position、font-family、z-index等不支持。
transition 能过渡哪些 CSS 属性
不是所有 CSS 属性都能用 transition 平滑过渡。只有「可计算、有中间值」的属性才支持，比如 color、opacity、transform、width、height（需有明确数值）、background-color。但以下这些不能：
-
display（none↔block无中间态） -
position（本身不触发重绘，且static↔absolute无插值） -
font-family（字体族名之间不可插值） -
z-index（离散整数，浏览器不提供过渡）
想实现“显示/隐藏渐变”，得换思路：用 opacity + visibility 组合，或改用 transform: scale() / max-height 模拟。
background-color 渐变要写对起始和结束值
直接写 background-color: #fff; → background-color: #007bff; 是能过渡的，但要注意：
- 必须用相同色彩模型（都用十六进制、或都用
rgb()、或都用hsl()），混用会导致跳变或失效 - 透明度要显式声明：
background-color: rgba(255, 255, 255, 1)→rgba(0, 123, 255, 0.8)，否则 alpha 缺省为 1，过渡时会突变 - 如果用了 CSS 变量，需确保变量本身是可动画的（现代浏览器支持
transition到自定义属性，但需搭配@property声明类型）
示例安全写法：
.box {
background-color: #f8f9fa;
transition: background-color 0.3s ease;
}
.box:hover {
background-color: #007bff;
}
transition 触发需要样式“变化”而非“重设”
常见误区：JS 动态设置 class 后立刻修改 style，结果过渡没生效。这是因为浏览器可能合并重排，跳过中间状态。关键点：
- 必须让元素在触发前已有初始
transition声明（不能只写在 hover 或 JS 里） - JS 中若需强制过渡，要在添加 class 后用
void el.offsetWidth或el.getBoundingClientRect()强制重排，再改目标样式 - 用
transform替代top/left更高效（避免触发布局，只走合成层）
比如按钮悬停位移，推荐：
.btn {
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn:hover {
transform: translateY(-2px);
}
多个属性过渡要小心 timing-function 和 duration 冲突
写成 transition: all 0.3s ease; 看似方便，但隐患大：
- 无意中过渡了不该动的属性（如
box-shadow在某些状态本该静止） - 不同属性需要不同缓动曲线（
opacity适合linear，transform更适合cubic-bezier） - 一个属性出错（比如写了
transition: color 0.3s, display 0.3s;）会让整条声明失效
更稳妥的是按需拆解：
.card {
transition:
opacity 0.2s linear,
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background-color 0.3s ease;
}
真正难的不是写对语法，而是判断哪些状态值得加过渡、哪些变化用户根本感知不到，还拖慢渲染。
