正确选择 timing-function 可提升透明度过渡的流畅性。通过 opacity 与 transition 配合，结合 ease-out、ease-in 或自定义 cubic-bezier 曲线，实现自然的淡入淡出效果，同时利用硬件加速优化性能。
在使用CSS实现元素透明度渐变时，opacity 搭配 transition 是最常见的方式。但要让过渡看起来自然流畅，关键在于对 timing-function 的合理选择与优化。
理解 opacity 与 transition 的基本用法
opacity 控制元素的透明程度，取值从 0（完全透明）到 1（完全不透明）。配合 transition，可以实现淡入淡出效果。
基础写法如下：
.element {
opacity: 0;
transition: opacity 0.3s;
}
<p>.element:hover {
opacity: 1;
}</p>这段代码会让元素在悬停时用 0.3 秒从透明变为不透明。虽然功能正常，但默认的 ease 时间函数可能导致动画起始或结束时显得“迟钝”。
立即学习“前端免费学习笔记（深入）”；
选择合适的 timing-function 提升视觉质感
transition 的 timing-function 决定了动画的速度曲线。不同函数带来不同的用户体验：
- ease：默认值，开始快，中间慢，结尾快 —— 适合多数场景，但用于 opacity 可能显得不够干脆。
- linear：匀速变化，过渡机械但稳定，适合强调一致性。
- ease-in：缓慢开始，突然结束 —— 常用于“出现”动画，避免突兀显现。
- ease-out：快速开始，缓慢结束 —— 推荐用于“消失”动画，收尾更柔和。
- ease-in-out：两端缓，中间快 —— 对称平滑，适合双向过渡。
实际应用中，淡出建议使用 ease-out，淡入可用 ease-in。若希望整体轻快，可自定义 cubic-bezier 曲线。
使用 cubic-bezier 实现更精准控制
通过 cubic-bezier() 函数可以自定义贝塞尔曲线，获得更符合产品调性的动效。
例如，一个更轻盈的淡入效果：
.element {
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.element.active {
opacity: 1;
}
这条曲线开头稍缓，迅速上升，结尾利落，比默认 ease 更显现代感。可通过浏览器开发者工具中的动画面板调试曲线。
性能与兼容性注意事项
opacity 是少数被 GPU 加速的 CSS 属性之一，搭配 transition 使用时性能优异，不会触发重排（reflow），仅涉及合成（composite）层。
为确保动画流畅，可考虑将频繁变化的元素提升为独立图层：
.element {
opacity: 0;
transition: opacity 0.3s ease-out;
transform: translateZ(0); /* 触发硬件加速 */
}
注意：过度使用硬件加速可能增加内存消耗，应按需使用。
基本上就这些。选对 timing-function，让透明度过渡不再生硬，细节上提升整体交互质感。
