正确选择 timing-function 可提升透明度过渡的流畅性。通过 opacity 与 transition 配合，结合 ease-out、ease-in 或自定义 cubic-bezier 曲线，实现自然的淡入淡出效果，同时利用硬件加速优化性能。
在使用CSS实现元素透明度渐变时，
opacity
搭配
transition
是最常见的方式。但要让过渡看起来自然流畅，关键在于对
timing-function
的合理选择与优化。
理解 opacity 与 transition 的基本用法
opacity 控制元素的透明程度，取值从 0（完全透明）到 1（完全不透明）。配合 transition，可以实现淡入淡出效果。
基础写法如下：
这段代码会让元素在悬停时用 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()
函数可以自定义贝塞尔曲线，获得更符合产品调性的动效。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
例如，一个更轻盈的淡入效果：
这条曲线开头稍缓，迅速上升，结尾利落，比默认 ease 更显现代感。可通过
浏览器
开发者工具中的动画面板调试曲线。
性能与兼容性注意事项
opacity 是少数被 GPU 加速的 CSS 属性之一，搭配 transition 使用时性能优异，不会触发重排（reflow），仅涉及合成（composite）层。
为确保动画流畅，可考虑将频繁变化的元素提升为独立图层：
注意：过度使用
硬件加速
可能增加内存消耗，应按需使用。
基本上就这些。选对 timing-function，让透明度过渡不再生硬，细节上提升整体交互质感。
.element {
opacity: 0;
transition: opacity 0.3s;
}
.element:hover {
opacity: 1;
}
.element {
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.element.active {
opacity: 1;
}
.element {
opacity: 0;
transition: opacity 0.3s ease-out;
transform: translateZ(0); /* 触发硬件加速 */
}