通过 transition 属性可让多个 CSS 属性同时过渡，如 transition: all 0.3s ease 或列出具体属性；常用于按钮悬停等交互效果，确保变化平滑。
在 CSS 中，想要让多个属性同时具备过渡效果，可以通过 transition 属性统一设置，让它们在同一时间段内平滑变化。实现方式简单且高效。
使用 all 或多个属性名
你可以明确列出需要过渡的属性，也可以使用 all 来代表所有可动画的属性。
例如：
transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
这样 width、height 和 background-color 会同时开始变化，并各自拥有 0.3 秒的过渡动画。
如果希望所有属性都自动过渡，可以写成：
transition: all 0.3s ease;
简写与默认值
CSS transition 支持简写语法，包含属性名、持续时间、缓动函数和延迟（可选）。
格式为：transition: property duration timing-function delay;
常见用法：- transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); — 所有属性使用贝塞尔曲线缓动
- transition: opacity 0.2s, transform 0.3s; — 不同属性可设不同时间
实际例子：按钮悬停效果
下面是一个常见场景：鼠标悬停时，按钮同时改变背景色、大小和透明度。
立即学习“前端免费学习笔记（深入）”；
CSS 示例：
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s, color 0.3s, transform 0.3s, opacity 0.3s;
}
button:hover {
background-color: #0056b3;
color: #fffdd0;
transform: scale(1.05);
opacity: 0.9;
}
这样四个属性会在 hover 时同时开始过渡，视觉效果自然流畅。
基本上就这些。只要把想变化的属性都列进 transition，它们就能一起动起来。不复杂但容易忽略细节，比如忘记加某个属性导致“跳变”。建议开发时用浏览器开发者工具检查哪些属性触发了过渡。
