CSS ::after伪元素动画中途消失原因及全程可见实现问询

为什么会中途消失？ #

有两个核心原因：

1. animation-fill-mode: forwards的干扰：这个属性是让动画结束后停在最后一帧，但你设置了infinite无限循环，当动画跑完一轮到100%（left:105%）后，它会卡在这个状态，下一轮直接跳回0%（left:-5%），中间的跳变过程会让元素看起来“消失”一下再重新出现。
2. 父元素可能裁剪了超出范围的内容：你的.btn用了all: inherit，如果它继承的父元素带有overflow: hidden，伪元素移动到按钮范围外时就会被裁剪，自然看不到了。

修复后的代码 #

.btn {
  all: inherit;
  position: relative;
  font-size: 6rem;
  overflow: visible; /* 强制允许内容超出父元素范围 */
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -5%;
  height: 100%;
  width: 2%;
  background-color: greenyellow;
  animation-name: LeftToRight;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* 移除animation-fill-mode: forwards，无限循环不需要保持最后一帧状态 */
}

@keyframes LeftToRight {
  0% {
    left: -5%;
  }
  100% {
    left: 105%;
  }
}

<button class="btn">UNIVERSE</button>

说明 #

• 去掉animation-fill-mode: forwards后，动画跑完一轮会平滑衔接下一轮，不会出现跳变消失的情况。
• 给.btn添加overflow: visible，确保伪元素在按钮左右两侧超出时也能正常显示，全程不会被裁剪。

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