CSS关键帧动画执行完成后如何隐藏对应的目标元素？

以下是几种不同场景下的可选实现方式：

• 方案1：父元素添加overflow: hidden（最简修改方案）
  子元素文本残留本质是父元素高度收缩时，溢出的内容没有被裁剪，只需要给动画父元素加overflow: hidden即可解决，无需修改原有动画逻辑，记得补充animation-fill-mode: forwards保留动画结束后的状态：

  #overlay {
    overflow: hidden;
    /* 时长根据你的动画实际需求调整 */
    animation: w100 4s forwards;
  }
  

• 方案2：用JS监听动画结束事件处理（可控性最高）
  如果你需要动画结束后完全释放元素占用的布局空间，可通过animationend事件统一处理元素隐藏逻辑：

  const overlay = document.getElementById('overlay');
  overlay.addEventListener('animationend', () => {
    // 完全隐藏且不占布局空间用display: none
    overlay.style.display = 'none';
    // 仅隐藏保留占位可以用visibility: hidden
    // overlay.style.visibility = 'hidden';
  });
  

• 方案3：使用transform实现动画（性能最优）
  高度属性动画会触发页面重排，换成transform缩放配合opacity实现相同视觉效果，性能更好，也不会出现内容残留问题：

  @keyframes w100 {
    0% {
      transform: scaleY(0);
      opacity: 0;
    }
    25% {
      transform: scaleY(1);
      opacity: 1;
    }
    75% {
      transform: scaleY(1);
      opacity: 1;
    }
    100% {
      transform: scaleY(0);
      opacity: 0;
      /* 如果需要释放高度空间可补充下面两行 */
      height: 0;
      visibility: hidden;
    }
  }
  #overlay {
    /* 设置缩放原点为顶部，贴合原有高度动画的视觉效果 */
    transform-origin: top;
    animation: w100 4s forwards;
  }
  

• 方案4：使用clip-path裁剪内容
  不需要修改布局属性，通过裁剪属性直接隐藏超出区域的内容：

  @keyframes w100 {
    0% {
      height: 0%;
      opacity: 0;
      clip-path: inset(0 0 100% 0);
    }
    25% {
      height: 30vw;
      opacity: 1;
      clip-path: inset(0);
    }
    75% {
      height: 30vw;
      opacity: 1;
      clip-path: inset(0);
    }
    100% {
      height: 0vw;
      opacity: 0;
      clip-path: inset(0 0 100% 0);
    }
  }
  

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