CSS中的transition属性用于实现元素状态变化时的平滑过渡效果。它通过设置属性、持续时间、速度曲线和延迟来控制动画行为，常用于:hover、:focus等状态切换。基本语法为transition: property duration timing-function delay，如背景色渐变或按钮悬停位移。典型应用包括按钮交互效果，结合transform和opacity可提升性能。需注意仅数值型和颜色类属性支持过渡，且应在默认状态定义transition以保证进出动画流畅。合理使用能显著提升界面交互质感。
CSS中的transition属性可以让元素在状态变化时实现平滑的视觉效果，比如鼠标悬停时的颜色渐变或位置移动。它主要用于响应:hover、:focus、JavaScript类切换等行为，使界面更自然流畅。
transition的基本语法
transition是一个复合属性，可以同时设置多个参数：
transition: property duration timing-function delay;-
property：指定要过渡的CSS属性，如
color、width、transform等。使用all表示所有可动画属性 -
duration：过渡持续时间，单位为秒（s）或毫秒（ms），如
0.3s -
timing-function：控制过渡的速度曲线，常用有
ease、linear、ease-in、ease-out等 - delay：延迟多久开始过渡，可选
示例：
.box {transition: background-color 0.5s ease-in-out 0.1s;
}
常见应用场景
最典型的是按钮悬停效果：
立即学习“前端免费学习笔记（深入）”；
.btn {background: #007bff;
color: white;
padding: 10px 20px;
border: none;
transition: all 0.3s ease;
}
.btn:hover {
background: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
这里对背景色、位移和阴影都应用了过渡，整体动效更柔和。
单独设置过渡属性
除了简写形式，也可分拆设置：
transition-property: width;transition-duration: 0.4s;transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);transition-delay: 0.2s;
适合需要对不同属性分别控制的复杂场景。
注意事项与技巧
并非所有CSS属性都支持过渡，一般数值型、颜色类属性可动画。常见可过渡属性包括：opacity、transform、color、background-color、width/height等。
建议优先使用transform和opacity做动画，性能更好，不会触发重排。
如果希望进入和离开都有动画，需在默认状态设置transition，而不是只在:hover里设置。
基本上就这些，合理使用transition能让交互更有质感，又不会增加复杂度。
