如何用CSS实现无水平滚动条且兼容父元素背景的文字滑入（文字揭露）动画？

我完全懂你遇到的这两个头疼问题——水平滚动条和父元素背景色搞砸动画效果，这类遮罩动画确实容易踩这些坑。咱们一步步来搞定：

问题根源拆解 #

1. 水平滚动条的由来：你第一个方案里，伪元素动画结束时left:105%，这会让伪元素的宽度直接超出容器甚至视口，浏览器自然会弹出水平滚动条来容纳这个“越界”的元素。
2. 父背景色下动画失效：第二个方案改了width动画，但伪元素基于right:0定位，加上没有限制溢出范围，当父元素有背景色时，遮罩层缩小后露出的是父元素背景，而非文字，等于动画逻辑完全跑偏了。

可靠解决方案：用Overflow + Transform实现无干扰动画 #

这个方案既不会产生滚动条，也不受父元素背景色影响，而且动画更流畅（transform是GPU加速属性，不会触发页面重排）：

核心思路 #

• 给动画目标元素（.text-slide-in）加overflow:hidden，把伪元素的活动范围死死限制在元素内部，杜绝溢出。
• 用transform:translateX()替代left或width来做滑动动画，完全不影响布局。
• 伪元素绝对定位覆盖在文字上方，动画从左到右滑出，逐步揭露下方的文字。

完整可运行代码 #

.site-wrap {
  max-width: 700px;
  margin: 0 auto;
}

section {
  padding: 4rem;
  border-radius: 8px;
  background-color: red;
}

.text-slide-in {
  position: relative;
  overflow: hidden; /* 关键：锁死伪元素的活动边界 */
  display: inline-block; /* 让遮罩层刚好包裹文字内容，可选：去掉则占满整行 */
}

@keyframes slide-reveal {
  0% {
    transform: translateX(0); /* 初始状态完全覆盖文字 */
  }
  100% {
    transform: translateX(100%); /* 滑出文字区域，完全揭露 */
  }
}

.text-slide-in:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  box-shadow: 0 0 15px white, 0 0 10px white, 0 0 5px white;
  animation: slide-reveal 1.5s ease infinite;
}

<div class="site-wrap">
  <section>
    <h1 class="text-slide-in">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>
  </section>
</div>

为什么这个方案能解决问题？ #

• overflow:hidden彻底把伪元素锁在目标元素内部，哪怕动画滑到最右端，也不会超出容器，自然不会出现水平滚动条。
• 伪元素始终覆盖在文字上方，动画滑动时露出的是文字本身，和父元素的背景色完全无关，完美解决背景干扰问题。
• transform是GPU加速属性，动画流畅度更高，不会像left或width那样频繁触发页面重排，性能更优。

额外小优化 #

• 如果需要遮罩层占满整行（比如h1默认是块级元素），去掉display:inline-block即可。
• 可以调整动画的ease函数（比如ease-in-out）或者时长，让动画过渡更符合你的预期。

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