最直接的opacity动画需用@keyframes定义从0到1的关键帧，配合animation属性；若交互触发则优先用transition，注意初始状态、visibility配合及兼容性问题。
用 @keyframes 定义 opacity 动画最直接
CSS 动画的核心是定义关键帧，@keyframes 里写好起始和结束的 opacity 值就行。注意：必须从 opacity: 0 开始、到 opacity: 1 结束，中间不能跳过 0 或 1，否则动画可能不触发或表现异常。
常见错误是只写了 animation: fade-in 0.3s; 却忘了定义 @keyframes fade-in，浏览器会静默忽略动画。
-
opacity是 CSS 属性，不是动画专用值，所以必须配合animation或transition才能动起来 - 动画名（如
fade-in）要和animation-name保持一致，大小写敏感 - 别在
@keyframes里写display: none——display不支持过渡/动画，会导致瞬间闪现
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fade-in 0.3s ease-out;
}
用 transition 更适合交互触发的渐显
如果元素是点击、悬停或 JS 控制显示（比如 classList.add('show')），transition 比 animation 更轻量、更可控。它依赖属性变化本身，不需要预设时间轴。
关键点在于：初始状态必须有 opacity: 0 且 visibility: hidden（或 pointer-events: none），否则过渡前元素可能仍可点击或占位。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
transition: opacity 0.3s ease-out，只写transition: all容易引发意外过渡（比如边框、颜色也跟着动） -
visibility: hidden → visible本身不可过渡，所以仅靠visibility切换不会产生淡入效果；得靠opacity配合 - 如果元素默认是
display: none，先得用 JS 改成display: block（或其他合适值），再加类触发动画，否则opacity过渡不生效
.element {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-out;
}
.element.show {
opacity: 1;
visibility: visible;
}
IE 和旧版 Safari 对 opacity 动画的支持要注意
IE10+ 和 Safari 6.1+ 都支持 opacity 的 transition 和 animation，但 IE9 及以下完全不支持 opacity 动画（只支持滤镜 filter: alpha(opacity=0)，且无法过渡）。
如果你的项目还要兼容 IE9，就得放弃纯 CSS 方案，改用 JS 库（如 jQuery 的 .fadeIn()）或现代 polyfill（如 animate.css 的降级处理）。
- 移动端 iOS Safari 9.3+ 对
@keyframes + opacity支持稳定，但早期版本（如 iOS 8）在position: fixed元素上偶发卡顿 - 动画中避免同时操作
opacity和transform，某些安卓 WebView 会因图层合成问题导致闪烁 - 性能敏感场景（如列表滚动中逐个淡入），优先用
will-change: opacity提示浏览器优化，但别滥用，否则可能增加内存开销
为什么有时动画“没反应”？检查这三处
最常见的失效原因不是写法错，而是上下文干扰。尤其容易被忽略的是父容器或自身样式冲突。
- 父元素设置了
overflow: hidden，而子元素动画时opacity变化区域超出边界，看起来像“没动” - 元素本身有
opacity: 0.5内联样式，会覆盖 CSS 中的opacity: 0初始值，导致from帧无效 - 动画触发时元素还没渲染完成（比如 JS 在 DOMContentLoaded 前就加了动画类），可以加
setTimeout(() => el.classList.add('animate'), 0)或用requestAnimationFrame确保渲染队列清空
opacity 动画看着简单，但真正稳落地的关键，在于初始状态是否干净、触发时机是否准确、以及有没有被其他样式悄悄覆盖。动手前先用 DevTools 检查 computed 样式里的 opacity 值变化过程，比猜更快。
