CSS transition通过指定属性、 duration、timing-function和delay实现平滑动效，推荐使用transform和opacity以提升性能，避免重排，合理设置起始状态与多属性逗号分隔过渡，使界面变化自然流畅。
要让网页元素的变化看起来更自然流畅，CSS transition 是最常用的方法之一。它能让属性值在一定时间内逐步过渡，实现诸如颜色渐变、尺寸缩放、位置移动等平滑效果。
1. 基本语法与常用属性
使用 transition 需要指定四个关键参数（可简写）：
简写方式：transition: property duration timing-function delay;
2. 实现常见平滑变化效果
以下是一些典型应用场景：
transition: background-color 0.3s ease;
transition: transform 0.2s linear;
transition: opacity 0.4s ease-out;
transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
3. 注意事项与最佳实践
为了确保过渡流畅且性能良好，建议注意以下几点：
立即学习“前端免费学习笔记（深入）”；
transition: opacity 0.3s ease, transform 0.2s ease;
all 可监听所有属性变化（不推荐用于复杂场景）：transition: all 0.3s ease;
