css 动画中的透明度变化_通过 opacity 实现渐隐效果

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，以及怎么处理它和布局、交互、性能之间的连锁反应。

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