使用 transition 可实现多个CSS属性同时过渡，通过逗号分隔为不同属性设置各自过渡效果，或用 all 统一设置；优先对 transform、opacity 等高性能属性做动画以提升性能。
在CSS中，使用 transition 实现多个属性同时过渡非常简单，只需要将多个属性的过渡规则写在一起即可。浏览器会自动处理这些属性的并行动画过程。
1. 使用简写属性 transition 同时控制多个CSS属性
你可以通过逗号分隔的方式，为不同的属性设置各自的过渡效果：
div {width: 100px;
height: 100px;
background-color: blue;
transition: width 0.5s ease, height 0.5s ease, background-color 0.5s linear;
}
div:hover {
width: 200px;
height: 200px;
background-color: red;
}
当鼠标悬停时，width、height 和 background-color 会同时开始过渡，各自按设定的时间和缓动函数变化。
2. 使用 all 简化所有属性的过渡
如果你希望元素的所有可动画属性都拥有统一的过渡效果，可以直接使用 all：
立即学习“前端免费学习笔记（深入）”；
div {
width: 100px;
height: 100px;
opacity: 0.8;
transition: all 0.4s ease;
}
div:hover {
width: 150px;
height: 150px;
opacity: 1;
}
这样所有发生变化的属性都会以相同的过渡时间和平滑方式执行动画。
3. 注意性能与可动画属性
不是所有CSS属性都支持过渡。建议优先对以下高性能属性做动画：
- transform（如 scale、rotate、translate）
- opacity
- filter（部分浏览器支持）
例如，用 transform 替代 width/height 更高效：
div {transform: scale(1);
transition: transform 0.3s ease, opacity 0.3s ease;
}
div:hover {
transform: scale(1.2);
opacity: 0.9;
} 基本上就这些。多属性过渡的关键是把它们列在 transition 属性里，用逗号分开，每个可以有不同的时间或曲线，浏览器会自动同步播放。
