transition属性可实现元素状态间的平滑过渡，提升交互体验；其语法为transition: property duration timing-function delay，常用于:hover、类切换等场景；推荐使用transform和opacity等高性能属性进行过渡，避免频繁重排；支持多属性分别设置过渡效果，并注意初始化值与display不可过渡等问题，合理运用可使界面更流畅自然。
CSS 中的 transition 属性让元素在状态变化时实现平滑的视觉过渡，无需 JavaScript 动画框架即可提升用户体验。它适用于:hover、:focus、JavaScript 控制的类切换等场景。掌握 transition 的基础语法和实用技巧，能让你的界面更自然流畅。
transition 基础语法与常用写法
transition 是一个简写属性，可同时定义多个过渡效果。其基本语法如下：
transition: property duration timing-function delay;四个参数分别表示：
- property：要过渡的 CSS 属性，如 width、opacity、transform 等，使用 all 可作用于所有可动画属性
- duration：过渡持续时间，单位为秒（s）或毫秒（ms），如 0.3s
- timing-function：缓动函数，控制动画速度曲线，常见值有 ease、linear、ease-in、ease-out、cubic-bezier()
- delay：延迟多久开始过渡，可选参数
示例：
立即学习“前端免费学习笔记（深入）”；
.btn {background-color: blue;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: red;
}
当鼠标悬停时，背景色会在 0.3 秒内平滑地从蓝色变为红色。
选择合适的过渡属性与性能优化
并非所有 CSS 属性都适合做过渡。频繁重绘的属性（如 width、height、margin、padding）可能引发布局重排，影响性能。推荐优先使用对渲染性能更友好的属性：
- transform：位移（translate）、缩放（scale）、旋转（rotate）等，由 GPU 加速
- opacity：透明度变化，性能高且支持硬件加速
- color 和 background-color：颜色渐变虽计算量稍大，但现代浏览器优化良好
例如，用 transform 实现按钮微缩效果比直接改 scale() 更流畅：
.icon {
transition: transform 0.2s ease-in-out;
}
.icon:hover {
transform: scale(1.1);
}
多属性过渡与分写技巧
可以同时为多个属性设置不同过渡效果：
.card {opacity: 1;
transform: translateY(0);
transition:
opacity 0.3s ease,
transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
这样 opacity 变化快而 transform 缓入缓出，营造层次感。若某些属性不需要过渡（如 position 或 z-index），应单独设置为 transition: none 避免意外动画。
触发时机与常见问题处理
transition 在属性值发生变化时自动触发，常见方式包括：
- 伪类状态（:hover、:focus、:active）
- JavaScript 添加/移除 class
- 属性绑定（如 input:checked 配合 ~ 选择器）
注意以下常见问题：
- 首次加载无过渡：初始状态应设好起始值，避免从“无”到“有”的突变
- 快速进出闪烁：可结合 transition-delay 或使用 debounce 类逻辑控制频率
- display 不可过渡：display: none 到 block 无法动画，可用 opacity + visibility 替代
例如隐藏元素时保留过渡：
.tooltip {opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.tooltip.active {
opacity: 1;
visibility: visible;
}
基本上就这些。transition 看似简单，但合理运用能让交互更细腻。关键是选对属性、控制节奏，并注意触发边界情况。不复杂但容易忽略细节。
