Chrome/Edge中CSS逐帧动画邻近hover时出现图层堆叠问题

一、Chromium内核异常的核心原因 #

这是Chromium渲染管线的动画状态持久化bug：当你用animation-fill-mode: forwards锁定绝对定位堆叠元素的最终状态时，若邻近元素触发重绘/图层提升（比如hover触发transform或动画），Chromium的图层合成器会错误地重置部分元素的动画结束状态，导致已隐藏的图层重新显示堆叠。

具体来说，steps(1, end)的离散动画在Chromium中，当元素被纳入新的堆叠上下文时，浏览器没有正确保留forwards锁定的最终帧状态，而是回退到初始状态——这和Chromium对合成图层的状态快照机制有关，属于已知的渲染特性缺陷。

二、纯CSS/HTML声明式解决方案 #

无需JavaScript，通过以下调整即可修复：

1. 关键帧同时锁定opacity与z-index #

放弃仅用visibility或display控制隐藏，在关键帧末尾同时设置不可见+底层堆叠，确保图层彻底被压到其他元素下方：

@keyframes type {
  /* 打字阶段的关键帧逻辑 */
  99% {
    opacity: 1;
    z-index: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
  }
}

2. 强制每个.layer创建独立合成图层 #

用will-change和transform强制浏览器为每个文字图层分配独立合成层，避免邻近元素重绘时干扰其状态：

.layer {
  position: absolute;
  will-change: opacity, z-index;
  transform: translateZ(0); /* 强制创建合成层 */
  /* 原有样式：动画、延迟等 */
}

3. 优化checkbox hack的状态稳定性 #

如果继续使用checkbox触发，给容器添加will-change强制浏览器监听状态变化，避免状态同步丢失：

#trigger-container {
  will-change: contents;
}

若无需兼容旧版浏览器，可改用:has()选择器替代checkbox，进一步减少状态冲突：

<div class="animation-trigger">
  <button>触发打字动画</button>
  <div class="text-layers">
    <div class="layer" style="--delay: 0s">字</div>
    <div class="layer" style="--delay: 0.1s">文字</div>
    <!-- 其他layer元素 -->
  </div>
</div>

.text-layers .layer {
  animation: type 2s steps(1, end) forwards paused;
  animation-delay: var(--delay);
  opacity: 0;
  z-index: -1;
}
.animation-trigger:has(button:hover) .text-layers .layer,
.animation-trigger:has(button:focus) .text-layers .layer {
  animation-play-state: running;
}

4. 禁用关键帧中的display切换 #

Chromium对关键帧内display属性的状态同步存在严重问题，彻底放弃用display: none控制元素显示，改用opacity+z-index或visibility+position: absolute; left: -9999px替代。

三、补充说明 #

该问题仅存在于Chromium内核浏览器，Firefox和Safari的图层合成机制对动画结束状态的维护更稳定。上述方案通过强制图层隔离和状态双重锁定，规避了Chromium的渲染缺陷，完全符合纯CSS/HTML的声明式要求。

内容的提问来源于stack exchange，提问作者famousStratum