不会暂停。visibility: hidden 仅隐藏视觉表现，动画仍执行、计时器运行、样式计算和重绘照常进行，只是不可见；真正暂停需用 animation-play-state: paused 或 display: none。
visibility: hidden 时 CSS 动画会暂停吗？
不会暂停。只要元素没被 display: none 移出渲染树，visibility: hidden 只是隐藏视觉表现，动画照常执行、计时器持续运行、样式计算和重绘也都在后台进行——只是你看不到。
这是最容易误判的一点：很多人以为“看不见=不跑”，结果发现 DOM 中的动画元素在 visibility: hidden 状态下依然消耗 CPU、触发 requestAnimationFrame 回调、甚至影响滚动性能。
-
visibility: hidden元素仍占据布局空间，仍参与文档流，动画属性（如transform、opacity）持续变化 - 若动画依赖
offsetTop或getBoundingClientRect()，值仍有效；但getComputedStyle(el).opacity返回的是当前计算值，不是初始值 - 想真正停掉动画，得用
animation-play-state: paused显式控制，或切换为display: none
opacity: 0 + visibility: hidden 组合有没有必要？
绝大多数情况下没必要。单用 opacity: 0 已能实现视觉隐藏，且保留交互能力（如 hover、focus）；加 visibility: hidden 反而会切断所有用户交互，还可能引发意外交互阻断。
真正需要两者组合的场景极少，典型只有一种：既要完全隐藏（包括 screen reader 不读），又得保持布局占位，同时确保子元素无法被聚焦或点击——比如一个正在淡出、但尚未从 DOM 移除的提示框。
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0：视觉透明，但默认仍可 focus、可 pointer-events（除非显式设pointer-events: none） -
visibility: hidden：禁用所有指针事件 + 屏蔽辅助技术 + 子元素自动继承不可见 - 二者叠加不会提升性能，也不会让动画“更彻底”；反而增加 CSS 层叠复杂度，容易漏掉某一项导致行为不一致
如何让动画在容器 hidden 时不执行（真正暂停）？
靠父容器控制子元素动画，唯一可靠方式是用 animation-play-state 配合 JS 切换，或者用 CSS 自定义属性 + @keyframes 中的条件逻辑（有限制）。
纯 CSS 方案中，可以利用父容器 class 控制子元素状态：
/* 父容器隐藏时，主动暂停所有子动画 */<br>.container[hidden] .animated {<br> animation-play-state: paused;<br>}但注意：[hidden] 是布尔属性，需 JS 设置 el.hidden = true 才生效；若用 display: none，则子元素已脱离渲染树，动画自然停止，无需额外控制。
- 避免用
visibility: hidden或opacity: 0作为动画启停开关 - JS 控制时，优先用
element.style.animationPlayState = 'paused'，比切 class 更精准 - 若动画由
@keyframes定义且含多个阶段，暂停后恢复可能跳帧；建议关键帧起始/结束态保持一致（如都设opacity: 0）
display: none 与 visibility: hidden 在动画上下文中的实际差异
根本区别不在“是否可见”，而在“是否在渲染树中”。这个差异直接决定动画能否继续驱动、JS 能否读取尺寸、浏览器是否优化掉相关计算。
例如一个 slide-in 动画，在父容器设 display: none 后，子元素的 offsetHeight 立即变为 0，getComputedStyle 返回的 transform 值仍是字符串，但浏览器大概率已跳过其样式计算和布局流程。
-
display: none：元素退出渲染树 → 动画停止 → 尺寸相关 API 返回 0 或空值 → 不触发重排重绘 → 性能开销趋近于零 -
visibility: hidden：元素仍在渲染树 → 动画持续 → 尺寸 API 仍返回有效值 → 触发重绘（尽管像素无变化）→ 有隐性性能成本 - 动画结束后想立刻移除元素？别等
opacity: 0完成再display: none，应在animationend事件里同步设置，否则会有 1 帧残留
动画真正“停”和“藏”是两件事，很多人混在一起处理，结果调试时发现定时器还在跑、内存没释放、或者过渡突然中断。关键就看你要停的是视觉效果，还是整个动画生命周期。
