使用opacity结合transition或@keyframes可实现css淡入淡出动画：transition适用于状态切换，如hover效果；@keyframes适合独立动画，如加载时自动淡入；两者可组合使用，实现初始淡入并支持交互式淡出。
在CSS中实现内容的淡入淡出动画，可以通过 opacity 属性结合 transition 或 @keyframes 来完成。两种方式各有适用场景：transition 适合简单的状态切换，而 keyframes 更适合复杂或独立控制的动画流程。
使用 opacity + transition 实现淡入淡出
当你希望元素在显示或隐藏时平滑过渡，可以使用 transition 控制 opacity 的变化。
常见于 hover 效果、显隐切换等交互场景。
示例：
html:
立即学习“前端免费学习笔记（深入）”；
<div class="fade-box">悬停我</div>
CSS:
.fade-box { opacity: 1; transition: opacity 0.5s ease; } .fade-box:hover { opacity: 0.3; }
这样，当鼠标悬停时，元素会用 0.5 秒逐渐变透明，移开后又恢复，实现平滑的淡入淡出效果。
使用 @keyframes 实现独立淡入动画
如果需要元素在加载时自动执行一次淡入，或者循环播放动画，@keyframes 更合适。
你可以定义从透明到不透明的动画过程，并将其绑定到元素上。
示例：淡入动画
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in-element { animation: fadeIn 1s ease forwards; }
应用此样式后，元素会从完全透明逐渐变为可见，并在动画结束后保持最终状态（forwards 的作用）。
组合使用 transition 与 keyframes 实现双向淡入淡出
有时你既想有初始加载的淡入，又希望在用户操作时再次触发淡出或重新淡入。
可以结合两者：用 keyframes 处理初始化动画，transition 处理交互响应。
示例：先自动淡入，再支持 hover 淡出
.combined-fade { opacity: 1; animation: fadeIn 1s ease forwards; transition: opacity 0.4s ease; } .combined-fade:hover { opacity: 0.2; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
这个元素会在页面加载时自动淡入，之后每次悬停都会缓慢变透明，松开后恢复。
基本上就这些。关键在于理解 transition 是状态之间的平滑过渡，而 keyframes 是定义动画帧序列。根据需求选择或组合使用，就能实现自然的淡入淡出效果。