transition属性通过控制CSS属性变化的持续时间、速度曲线和延迟，实现元素状态间的平滑动画效果。它支持对多个属性分别设置过渡参数，常用于悬停效果、淡入淡出显示/隐藏等交互场景。推荐优先使用transform和opacity以提升性能，避免对布局属性频繁过渡，并可结合will-change优化渲染。正确配置transition能显著增强用户体验。
CSS中的transition属性是实现平滑动画效果的关键工具之一，它能让元素在状态变化时（如鼠标悬停、焦点获取等）以渐变方式改变样式，而不是瞬间切换。掌握transition的基础用法和一些实用技巧，可以显著提升网页的交互体验。
transition 属性的基本语法
transition是一个复合属性，可以同时设置以下四个子属性：
-
property：指定要过渡的CSS属性，例如
width、color、opacity等，使用all表示所有可动画属性 - duration：过渡持续时间，单位为秒（s）或毫秒（ms），必须定义，否则无效
-
timing-function：过渡的速度曲线，常见值有
ease、linear、ease-in、ease-out、ease-in-out，也可使用cubic-bezier()自定义 - delay：过渡开始前的延迟时间
基本写法如下：
.element {
transition: property duration timing-function delay;
}
例如，让一个按钮的背景色在0.3秒内平滑变化：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: #007bff;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
常用应用场景与技巧
transition常用于增强用户交互反馈，以下是几个典型应用：
1. 悬停效果（Hover Effects）
对按钮、链接、卡片等元素添加颜色、阴影或尺寸变化的过渡，使界面更生动。
.card {
opacity: 0.8;
transform: scale(1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
opacity: 1;
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
2. 显示/隐藏过渡
配合opacity和visibility实现淡入淡出效果，避免直接使用display: none/block导致无法过渡。
.popup {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup.active {
opacity: 1;
visibility: visible;
}
3. 多属性分别控制
不同属性可设置不同的过渡时间与曲线，提升细节表现力。
.box {
transition:
width 0.4s ease-in,
height 0.2s ease-out,
background-color 0.3s linear;
}
注意事项与性能优化
虽然transition使用简单，但不当使用可能影响性能或导致效果异常。
- 优先对
transform和opacity做过渡，这两者由GPU加速，性能更好 - 避免对
height、margin、padding等频繁触发重排的属性进行长时间过渡 - 使用
will-change提示浏览器提前优化（谨慎使用） - 确保起始和结束状态的属性值类型一致，如
auto高度无法过渡，应改用max-height模拟
基本上就这些。合理运用transition，能让页面动效自然流畅，既不突兀也不拖沓。关键在于选择合适的属性、时间和缓动函数，结合实际交互场景灵活调整。
