合理设置CSS transition的属性、时长、缓动函数和延迟可实现流畅动画。应指定具体属性如opacity、transform，避免使用all以提升性能；持续时间根据场景选择0.1s-0.8s；推荐ease-out或cubic-bezier等缓动函数；优先使用transform和opacity以利用GPU加速，避免重排重绘。示例中按钮hover效果通过分别设置transform和background的过渡参数，实现细腻平滑的交互反馈。
CSS transition 能让元素在属性变化时实现自然的过渡效果，而不是瞬间切换。要实现平滑动画，关键在于合理设置 transition 的四个核心参数：属性、持续时间、缓动函数和延迟时间。
1. 指定需要过渡的属性
不要使用all 作为过渡属性，虽然它能让所有属性都产生动画，但性能较差。应明确指定你希望动画的属性，比如：transition: opacity 0.3s;transition: transform 0.4s;transition: background-color 0.2s;
opacity、transform、visibility、width/height（谨慎使用）、left/top 等。2. 设置合适的持续时间（duration）
动画时间太短会显得突兀，太长则让人感觉卡顿。一般推荐：- 快速反馈（如按钮 hover）：0.1s - 0.3s
- 普通状态切换：0.3s - 0.5s
- 较大区域动画（如侧边栏展开）：0.5s - 0.8s
3. 使用合适的缓动函数（easing）
缓动函数控制动画的速度曲线，让运动更自然。常见选项有：-
ease：默认值，先快后慢（适合大多数场景） -
linear：匀速，常用于旋转或循环动画 -
ease-in：缓慢开始 -
ease-out：缓慢结束（推荐用于出现类动画） -
ease-in-out：两端慢，中间快（适合对称动画） - 自定义贝塞尔曲线：
cubic-bezier(0.4, 0, 0.2, 1)
4. 合理使用 transform 和 opacity
这两个属性由 GPU 加速，动画更流畅，不会触发重排（reflow）或重绘（repaint）。- 用
transform: scale()替代修改width/height - 用
transform: translateX()替代修改left - 用
opacity控制显隐，配合visibility提高性能
完整示例
一个平滑的按钮悬停效果：
.button {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
transition: transform 0.2s ease, background 0.3s ease;
}
.button:hover {
transform: translateY(-2px);
background: #0056b3;
}
这个例子同时过渡了 transform 和 background，各自设置了合适的时间和缓动，视觉上更细腻。基本上就这些。掌握 transition 的关键不是写得多复杂，而是理解哪些属性适合动画、如何控制节奏和性能。合理运用，就能做出自然流畅的交互效果。
