transition 简写属性可同时控制多个CSS属性的过渡效果，语法为 transition: property duration timing-function delay；通过逗号分隔可为不同属性设置独立过渡，常用于 hover、focus 等状态变化，提升界面流畅性；建议优先使用 transform 和 opacity 避免重排，合理配置缓动与延迟以优化体验。
CSS 中的 transition 简写属性可以同时控制多个过渡效果，适用于元素在不同状态间的变化，比如 hover、focus 或 class 切换。合理使用 transition 能让界面更自然流畅。
transition 简写语法结构
transition 属性的完整简写格式为：
transition: property duration timing-function delay;各部分含义如下：
- property：指定要过渡的 CSS 属性，如 width、opacity，也可用 all 表示所有可动画属性
- duration：过渡持续时间，单位为秒（s）或毫秒（ms）
- timing-function：控制过渡的速度曲线，如 ease、linear、ease-in-out
- delay：过渡开始前的延迟时间
这些值可以省略部分，默认值分别为：all 0s ease 0s。
立即学习“前端免费学习笔记（深入）”；
同时控制多个属性的过渡
如果希望多个属性有不同的过渡设置，可以在一个声明中用逗号分隔多个 transition 规则。
transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, width 0.4s linear;上面的例子中：
- opacity 变化快，0.3 秒内完成，使用默认缓动
- transform 过渡稍慢，且有自定义缓动和 0.1 秒延迟
- width 使用线性变化，持续 0.4 秒
这样能精细控制每个属性的动画行为，避免统一过渡带来的生硬感。
常见状态切换中的应用
transition 常用于响应用户交互，例如鼠标悬停（:hover）、获得焦点（:focus）等。
示例：按钮在 hover 时改变背景色和位移：
.button { background: #007bff; padding: 10px 20px; transition: background-color 0.3s ease, transform 0.2s ease; } .button:hover { background-color: #0056b3; transform: translateY(-2px); }这里两个属性独立过渡。背景色渐变，同时轻微上移，视觉更生动。
注意事项与最佳实践
使用 transition 时需注意以下几点：
- 不是所有 CSS 属性都能过渡，只有连续数值类属性支持（如颜色、尺寸、透明度），可查 MDN 的“animatable properties”列表
- 尽量避免对 width、height、margin 等布局属性做过渡，可能引发重排，影响性能；推荐使用 transform 替代位移或缩放
- 当多个状态切换频繁时，设置合适的 delay 和 duration 可防止动画闪烁或卡顿
- 在移动端考虑启用 will-change 或 transform: translateZ(0) 来提升动画性能
基本上就这些。掌握 transition 简写并合理拆分多个属性的过渡设置，能让交互更细腻自然。不复杂但容易忽略细节。
