如何通过CSS动画和opacity属性结合，设置关键帧实现元素渐隐渐显效果？

本文共计819个文字，预计阅读时间需要4分钟。

CSS中，opacity 是一个数值型属性，其合法取值范围是 0 到 1（包含小数）。常见错误是将其写成 opacity: 0% 或 opacity:，正确的写法应直接使用小数或分数，例如 opacity: 0.5 或 opacity: 50%。

正确写法只接受数字：

@keyframes fade { from { opacity: 1; } to { opacity: 0; } }

• opacity: 0 ✅ 合法，完全透明
• opacity: 0.3 ✅ 合法，30% 不透明
• opacity: 0% ❌ 无效，浏览器忽略该声明
• opacity: "0" ❌ 语法错误，字符串不被解析

animation-fill-mode: forwards 才能保持最终透明度

默认情况下，动画播放完会“回退”到元素原始样式。比如一个原本 opacity: 1 的元素执行了 fade-out 动画，结束后会突然闪回不透明——这不是渐隐，是假隐。

解决方法是加 animation-fill-mode: forwards，让动画停在 to 或最后一帧的状态：

立即学习“前端免费学习笔记（深入）”；

.box { animation: fade 0.3s ease-in-out; animation-fill-mode: forwards; }

• 没加 forwards：动画结束瞬间恢复原始 opacity
• 加了 forwards：结束时保持 opacity: 0，视觉上真正“消失”
• 若需反复切换，建议用 animation-direction: alternate 配合 infinite，而非依赖 fill-mode

opacity 动画要搭配 will-change 提升性能

频繁修改 opacity 本身开销不大，但若元素还参与其他渲染（比如有阴影、滤镜或复杂子树），浏览器可能不会自动启用合成层，导致掉帧。

显式告诉浏览器“这个元素的透明度会变”，能提前创建独立图层：

.fading-element { will-change: opacity; }

• 仅在需要动画的元素上设置，避免滥用（will-change 有内存和管理成本）
• 动画开始前加，结束可选移除（用 JS 控制更精准）
• 不加也可能正常，但在低端设备或密集动画场景下，卡顿会更明显

transition 比 @keyframes 更适合简单渐隐渐显

如果只是 hover 显隐、点击切换这类单次状态变化，用 transition 更轻量、更可控，不需要定义 keyframes：

.toggle { opacity: 1; transition: opacity 0.25s ease; } .toggle.hidden { opacity: 0; }

• transition 自动补间，代码量少，逻辑直白
• 支持反向过渡：从 hidden 移除 class 时，自动从 0→1 渐显
• @keyframes 更适合循环、多段、或需精确控制中间帧的场景（如淡入→暂停→淡出）

真正容易被忽略的是：opacity 动画是否触发重排（reflow）。答案是不触发——它只影响绘制层，但前提是别在动画过程中同时改 width、height 或 display，否则合成优化就失效了。