transition-property 和 transition-duration 必须同时设置才生效；只写其一动画不会触发，浏览器需明确“动哪个属性”和“动多快”才能启动过渡。
transition-property 和 transition-duration 必须同时设置才生效
只写 transition-duration 不指定属性，动画不会触发；只写 transition-property 不设时间，变化仍是瞬时的。浏览器需要明确“动哪个属性”和“动多快”两个信息才能启动过渡。
常见写法是合并为 transition 简写：
button {
background-color: #007bff;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
等价于分别写：
transition-property: background-colortransition-duration: 0.3stransition-timing-function: ease-
transition-delay: 0s（默认值）
哪些 CSS 属性支持 transition
不是所有属性都能做平滑过渡。只有「可计算、有中间值」的属性才支持，比如 opacity、transform、color、width（需有明确单位）、margin 等。
立即学习“前端免费学习笔记（深入）”；
以下属性通常不支持或效果不可靠：
-
display（none→block无法插值） -
height（从auto开始无法计算终点） -
font-family（字体切换无中间态） -
content（伪元素内容不可过渡）
遇到“动不起来”，先检查属性是否在 CSS 动画属性列表 中。
transition-timing-function 控制加速曲线
ease（默认）是缓入缓出，但实际交互中常需更直接的响应。比如按钮悬停希望快速响应，可用 ease-in-out 或 cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material Design 的标准缓动）。
调试建议：
- 用
linear判断是否真“匀速”——排除其他干扰 - 避免在
transition简写中漏掉 timing-function，否则会回退到ease - 多个属性不同曲线？得拆开写：
transition: opacity 0.2s linear, transform 0.3s ease-out;
transition-delay 容易被忽略的触发时机问题
transition-delay 是从状态变化“开始”后延迟多久才启动过渡，不是从鼠标移上才计时。例如：
a {
opacity: 1;
transition: opacity 0.2s ease 0.1s;
}
a:hover {
opacity: 0.6;
}
鼠标移上瞬间，opacity 并不立刻变，而是等 0.1s 后才开始淡出——这会让反馈显得迟钝。
真正想实现“悬停后稍等再动”，应结合 :hover + transition-delay 在 hover 状态里定义，或者用 JavaScript 控制类名添加时机。纯 CSS 下，delay 更适合用于入场/离场节奏错位，比如卡片浮起略晚于背景色变化。
复杂交互动画里，transition 的局限很快会暴露：它只能响应属性变化，不能控制关键帧、循环或链式动作。这时候该换 @keyframes + animation 了。
