如何通过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 动画，结束后会突然闪回不透明——这不是渐隐，是假隐。