CSS过渡是实现元素样式平滑渐变效果的重要特性，它可以在元素样式属性发生变化时，让变化过程不再是瞬间完成，而是按照设定的规则逐步过渡，提升页面的交互体验。通过transition相关属性，开发者可以自定义过渡的时长、速率曲线等参数，满足不同的视觉效果需求。
transition属性基础语法
transition是一个简写属性，用于设置元素过渡的相关参数，完整的简写语法如下：
/* 完整简写格式 */ transition: property duration timing-function delay;
其中各个参数的含义如下：
- property：指定需要应用过渡效果的CSS属性名称，比如width、height、background-color等，设置为all表示所有可过渡的属性都生效
- duration：过渡效果的持续时间，单位为秒s或者毫秒ms，必须设置且不能为0，否则过渡不会生效
- timing-function：过渡的速率曲线，也就是easing函数，控制过渡过程中速度的变化规律
- delay：过渡效果延迟开始的时间，单位为s或者ms，可选参数，默认值为0
duration参数控制过渡时长
transition-duration属性用于设置过渡效果从开始到结束所花费的时间，这个参数直接决定了渐变效果的快慢。时长设置得越长，过渡过程越慢，反之则越快。
下面是一个简单的示例，当鼠标悬停在div元素上时，元素的宽度从100px过渡到300px，分别设置不同的duration观察效果差异：
/* 基础样式 */
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 设置宽度属性过渡，时长为1秒 */
transition: width 1s;
}
/* 鼠标悬停时改变宽度 */
.box:hover {
width: 300px;
}
/* 另一个盒子，时长为3秒 */
.box-slow {
width: 100px;
height: 100px;
background-color: #67c23a;
transition: width 3s;
}
.box-slow:hover {
width: 300px;
}
对应的HTML结构如下：
<div class="box">1秒过渡</div> <div class="box-slow">3秒过渡</div>
可以看到，第一个盒子的宽度变化在1秒内完成，第二个盒子的宽度变化则需要3秒，时长参数直接控制了过渡的快慢。
easing参数调整过渡速率
transition-timing-function也就是常说的easing函数，用于控制过渡过程中属性值变化的速度曲线，CSS内置了多个常用的easing函数，也可以通过cubic-bezier()自定义曲线。
常见的内置easing函数如下：
| 函数名称 | 效果说明 |
|---|---|
| ease | 默认值，慢速开始，然后变快，最后慢速结束 |
| linear | 匀速过渡，整个过程速度保持一致 |
| ease-in | 慢速开始，之后逐渐变快 |
| ease-out | 快速开始，之后逐渐变慢 |
| ease-in-out | 慢速开始，慢速结束，中间速度较快 |
下面的示例展示了不同easing函数的效果差异，鼠标悬停时所有盒子的宽度都从100px过渡到300px，时长都是2秒，仅easing不同：
.box-ease {
width: 100px;
height: 60px;
margin: 10px 0;
background-color: #f56c6c;
transition: width 2s ease;
}
.box-linear {
width: 100px;
height: 60px;
margin: 10px 0;
background-color: #e6a23c;
transition: width 2s linear;
}
.box-ease-in {
width: 100px;
height: 60px;
margin: 10px 0;
background-color: #909399;
transition: width 2s ease-in;
}
.box-ease-out {
width: 100px;
height: 60px;
margin: 10px 0;
background-color: #303133;
color: #fff;
transition: width 2s ease-out;
}
/* 悬停时统一改变宽度 */
.box-ease:hover, .box-linear:hover, .box-ease-in:hover, .box-ease-out:hover {
width: 300px;
}
对应的HTML结构：
<div class="box-ease">ease效果</div> <div class="box-linear">linear效果</div> <div class="box-ease-in">ease-in效果</div> <div class="box-ease-out">ease-out效果</div>
多属性过渡配置
实际开发中经常需要让元素的多个属性同时产生过渡效果，这时候可以给transition设置多个属性配置，用逗号分隔即可。比如同时让宽度、背景色、边框半径产生过渡：
.multi-transition {
width: 120px;
height: 120px;
background-color: #409eff;
border-radius: 0;
/* 多属性过渡配置 */
transition:
width 1s ease,
background-color 1.5s ease-in-out,
border-radius 0.8s linear;
}
.multi-transition:hover {
width: 240px;
background-color: #f56c6c;
border-radius: 50%;
}
对应的HTML结构：
<div class="multi-transition">多属性过渡</div>
这个示例中，鼠标悬停时宽度用1秒ease曲线过渡，背景色用1.5秒ease-in-out曲线过渡，边框半径用0.8秒linear曲线过渡，三个属性的过渡互不影响，实现更丰富的渐变效果。
注意事项
使用CSS过渡实现渐变效果时需要注意以下几点：
- 不是所有CSS属性都支持过渡，比如display属性就不支持过渡，需要过渡显示隐藏效果时可以用opacity、visibility配合过渡实现
- 如果只设置transition属性但没有设置duration，过渡不会生效，duration是必填参数
- 过渡效果只在属性值发生变化时触发，比如通过:hover伪类、JavaScript修改样式、添加删除类名等方式改变属性值都会触发过渡
- 当使用
transition: all时，所有可过渡的属性变化都会产生过渡，可能会导致一些非预期的过渡效果，建议按需指定需要过渡的属性
如果需要更复杂的动画效果，比如多段动画、循环动画，可以考虑使用CSS animation属性，过渡更适合简单的状态切换渐变场景。
CSS_transitiontransition_durationtransition_timing_function元素渐变效果修改时间：2026-07-15 23:21:33