在CSS中实现元素样式变化的平滑过渡时，transition属性是核心工具。当我们需要让元素的多个样式属性同时产生过渡效果时，使用过渡简写语法可以大幅简化代码，避免重复书写多个transition相关属性。
CSS过渡简写的基础语法
单个属性的transition简写语法格式为：transition: property duration timing-function delay;，其中property是过渡的CSS属性名，duration是过渡持续时间，timing-function是过渡速度曲线，delay是过渡延迟时间。后两个参数属于可选参数。
当需要处理多个属性的过渡时，只需要用逗号分隔每组过渡配置即可，完整语法如下：
/* 多属性过渡简写语法 */ transition: 属性1 持续时间1 速度曲线1 延迟1, 属性2 持续时间2 速度曲线2 延迟2, ...;
多属性过渡简写示例
假设我们需要让一个div元素在鼠标悬停时，宽度、背景色、边框半径三个属性同时产生过渡效果，具体配置如下：
/* 基础样式 */
.box {
width: 100px;
height: 100px;
background-color: #409eff;
border-radius: 0;
/* 多属性过渡简写：三个属性分别配置不同的过渡参数 */
transition: width 0.5s ease, background-color 0.3s linear, border-radius 0.8s ease-in-out 0.2s;
}
/* 悬停状态样式 */
.box:hover {
width: 200px;
background-color: #f56c6c;
border-radius: 50%;
}
上述代码中，三个属性的过渡配置说明：
- width属性过渡持续0.5秒，使用ease速度曲线，无延迟
- background-color属性过渡持续0.3秒，使用linear匀速曲线，无延迟
- border-radius属性过渡持续0.8秒，使用ease-in-out速度曲线，延迟0.2秒执行
多属性过渡的注意事项
1. 属性名必须合法
简写中第一个参数必须是有效的CSS属性名，如果填写了不存在的属性或者不可过渡的属性（如display），该组过渡配置会失效，不会影响其他组的过渡效果。
2. 可选参数的省略规则
如果某组过渡不需要设置速度曲线和延迟，可以只写属性名和持续时间，例如：
/* 省略可选参数的多属性过渡 */ transition: width 0.5s, height 0.5s, opacity 0.3s;
3. 统一配置所有属性的过渡参数
如果所有需要过渡的属性都使用相同的持续时间、速度曲线和延迟，可以先用transition-property列出所有属性，再配置统一的过渡参数，示例如下：
.box {
width: 100px;
height: 100px;
opacity: 1;
/* 先指定过渡属性 */
transition-property: width, height, opacity;
/* 统一配置过渡参数：持续0.5秒，ease曲线，无延迟 */
transition-duration: 0.5s;
transition-timing-function: ease;
/* 上面的分开写法也可以合并为简写 */
/* transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease; */
}
常见错误写法
很多开发者会错误地将多个属性名写在同一组配置中，这种写法是错误的，会导致过渡效果不生效：
/* 错误写法：多个属性名放在同一组配置中 */ transition: width, height, background-color 0.5s ease;
正确的写法必须是每个属性对应一组配置，用逗号分隔，如前面示例所示。
浏览器兼容性说明
transition属性属于CSS3规范内容，目前所有主流现代浏览器都支持多属性过渡简写语法，包括Chrome、Firefox、Safari、Edge等，不需要添加浏览器前缀即可正常使用。
CSStransition过渡简写多属性过渡前端样式修改时间：2026-07-06 08:48:24