可靠做法是用逗号分隔多组「属性 持续时间 缓动 延迟」写在同一transition声明中，如transition: width 0.3s, opacity 0.6s ease-in, transform 0.2s cubic-bezier(0.4,0,0.2,1)；重复声明会覆盖，仅最后一个生效。
transition中怎么给不同css属性配不同持续时间
可以，但不能靠写多个transition声明来“覆盖”，浏览器只认最后一个。真正可靠的做法是把所有属性和对应时间、缓动、延迟写在同一个transition值里，用逗号分隔。
-
transition支持多组「属性 持续时间 缓动 延迟」组合，例如：transition: width 0.3s, opacity 0.6s ease-in, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); - 每个组合必须完整写出四个部分（或至少前两个），不能省略中间项——比如
width 0.3s, opacity 0.6s合法，但width 0.3s, opacity 0.6s ease-in 0.1s, transform 0.2s里最后一项缺缓动和延迟，会被整个忽略 - 如果某个属性没出现在列表里（比如
height），它就不会有过渡效果，哪怕后来通过js改了值
为什么写了多个transition却只有最后一个生效
因为transition是简写属性，重复声明时后写的会完全覆盖前面的。你写两行：
transition: width 0.3s;<br>transition: opacity 0.6s;等价于只写了第二行——width那段直接被丢掉了。
- 这不是bug，是CSS简写属性的通用规则（
background、font也一样） - 想验证是否生效？打开DevTools，在Styles面板里看
transition那一行有没有被划掉；或者把鼠标悬停后快速切到Computed标签页，搜transition-Property，看实际解析出的值 - 别用
transition: all 0.3s;然后指望某些属性“慢一点”——all会让所有可动画属性都套用同一套时间，没法区分
哪些CSS属性能单独设过渡时间
不是所有属性都能独立控制。只有那些“可动画”的属性才支持过渡，而且有些属性虽然能动，但浏览器不支持为它们单独指定缓动或延迟（比如display）。
立即学习“前端免费学习笔记（深入）”；
- 安全可用的常见属性：
opacity、transform、width、height、margin、padding、color、background-color - 明确不支持过渡的：
display、position、z-index（改变值会立即生效，无过渡） -
font-size、line-height这类可以过渡，但动画可能有渲染抖动，不如用transform: scale()顺滑 - 自定义属性（
--my-var）要配合@property注册后才能过渡，否则设了时间也没用
transition-delay和timing-function怎么不互相干扰
每个属性组里的delay和timing-function是绑定在该属性上的，不会“传染”给别的属性。
- 例如：
transition: opacity 0.4s ease-out 0.1s, transform 0.2s linear 0.3s;——opacity先等0.1秒再开始淡出，transform则等0.3秒才开始位移 - 注意顺序：必须严格按「属性 持续时间 缓动 延迟」排列，调换位置会导致整组失效（比如把延迟写在缓动前面，浏览器就认不出来）
- 如果某属性只需要延迟不要缓动，可以写成
opacity 0.4s step-start 0.1s，但不能省略step-start——空着就等于没写这一项，后面延迟也会被忽略
实际用的时候，最常漏掉的是“逗号分隔”和“每组四要素完整性”。写完多看一眼Computed里的解析结果，比猜靠谱得多。