opacity动画需配合transition或@keyframes才生效；直接设opacity:0仅瞬隐，不触发动画；opacity为0仍占布局空间且响应事件，需搭配visibility:hidden或display:none彻底移除占位。
opacity 动画必须配合 transition 或 @keyframes 才生效
直接写 opacity: 0 不会触发动画，只是瞬间隐藏。CSS 中透明度变化要动起来，得明确告诉浏览器“这个属性要过渡”或“按时间轴变化”。transition 适合简单状态切换（比如 hover 显隐），@keyframes 适合复杂节奏控制（比如淡入后暂停再淡出）。
- 用
transition时，必须同时设置触发条件（如:hover、class切换）和目标值（如opacity: 0） -
transition: opacity 0.3s ease;比transition: all 0.3s;更安全——避免意外过渡其他属性 - 如果元素初始
opacity: 0，但希望首次加载就淡入，transition无效，必须用@keyframes配合animation
opacity 为 0 时元素仍占据布局空间
这是最容易被忽略的副作用。opacity: 0 只让元素“看不见”，不等于“不存在”。它依然响应事件（如点击、鼠标移入），也影响父容器高度和兄弟元素排版。
- 需要彻底移除占位？搭配
visibility: hidden（保留空隙）或display: none（完全脱离文档流） - 若用
display: none，注意它不能参与 CSS 动画——必须在opacity动画结束后，用 JavaScript 在animationend事件里手动设置 - 想保持可访问性（如屏幕阅读器仍读取内容），优先用
opacity+pointer-events: none禁用交互，而不是visibility: hidden
opacity 动画在低性能设备上可能卡顿
opacity 本身是 GPU 友好属性，但若动画元素层级深、有大量重叠阴影或滤镜，或同时运行多个 opacity 动画，仍可能掉帧。
- 确保动画元素已启用硬件加速：
transform: translateZ(0)或will-change: opacity（慎用，仅对频繁动画的元素） - 避免在
:hover上直接写transition: opacity 0.5s并同时触发其他样式变更（如height、margin），这会导致 layout + paint 开销激增 - 移动端 Safari 对快速连续触发的 opacity 动画（如滚动中反复 show/hide）兼容性较差，建议加防抖或改用
transform: scale(0)替代部分场景
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.fade-out-element {
animation: fadeOut 0.4s forwards;
}
/* 动画结束后保持 opacity: 0，且不触发回弹 */
opacity 动画看似简单，真正难的是判断何时该用 transition、何时必须切到 @keyframes，以及怎么处理它和布局、交互、性能之间的连锁反应。
立即学习“前端免费学习笔记（深入）”；
