能，transition 属性可通过逗号分隔多组参数实现多个 CSS 属性各自独立过渡，如 transition: width 0.3s ease-in, opacity 0.2s linear 0.1s；未支持动画的属性（如 display、height:auto）不会触发过渡。
transition 属性能否同时控制多个 CSS 属性的过渡
能，但不是靠写多个 transition 声明来实现。CSS 规范只允许一个 transition 属性生效（后声明的会覆盖前声明的），所以直接写两行 transition: width 0.3s; 和 transition: opacity 0.2s;，后者会完全取代前者。
如何真正让 width、opacity、transform 等多个属性各自按不同时间/缓动过渡
用逗号分隔的多组过渡描述符，写在单个 transition 声明里即可。每组包含「属性名、持续时间、timing-function、延迟」四个可选部分，缺省值会自动补上。
常见写法示例：
transition: width 0.3s ease-in, opacity 0.2s linear 0.1s, transform 0.35s cubic-bezier(0.2, 0.8, 0.4, 1);
- 每组之间用英文逗号分隔，不能漏掉
- 属性名必须拼写准确（如
background-color不能简写为background） - 未指定的参数按默认值处理：
timing-function是ease，delay是0s - 如果某属性想禁用过渡，得显式写成
transition-property: none，不能留空或写auto
transition-property 设为 all 时为什么有些变化没过渡效果
因为不是所有 CSS 属性都支持过渡。浏览器只对“可动画化”（animatable）的属性做插值计算，比如 color、left、transform 可以，但 display、height（当值为 auto 时）、font-family 就不行。
立即学习“前端免费学习笔记（深入）”；
-
transition: all 0.3s;看似方便，实则容易掩盖问题——比如display: none → block会直接跳变，毫无过渡 -
height设为auto时无法过渡，得改用max-height配合足够大的值来模拟 - 用
transform替代top/left做位移，性能更好，且保证可过渡
transitionend 事件怎么判断是哪个属性触发的
事件对象的 propertyName 属性会返回实际完成过渡的 CSS 属性名（不含 vendor prefix），可用于区分逻辑分支。
示例：
elem.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity') {
console.log('透明度过渡结束');
} else if (e.propertyName === 'transform') {
console.log('变换结束');
}
});
- 注意：如果多个属性过渡时间相同，
transitionend可能连续触发多次，不要假设只来一次 -
transitionend不会在transition: none或过渡被取消（如 class 被快速切走）时触发 - 移动端需留意 Safari 对
transitionend的兼容性，某些老版本可能不触发伪元素的该事件
px 和 rem 混用）导致整条链静默失效。调试时优先检查 computed style 中目标属性是否真在变，再看 transition 声明是否被覆盖或语法出错。 
