如何使用 CSS 在动画中创建文本幻灯片？

Question

所以我正在尝试创建一个 text reveal / text-slide-in 动画。

我创建了这个：

@keyframes slide {
  0% {
    left: 0;
  }

  100% {
    left: 105%;
  }
}

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

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

而这正是我所追求的effect/animation。问题是这基本上会产生一个不必要的宽度。您可以在代码段上看到水平滚动条。

当向父元素添加 background-color 时，此方法的另一个问题变得明显：

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

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

@keyframes slide {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

.text-slide-in {
  position: relative;
}

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

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

如您所见，设置background-color时将不起作用。

我也尝试过使用 transform & translateX css 属性，但我也无法让它工作。

在这种情况下，什么是可靠的解决方案？

Answer 1

您可以设置宽度动画并从右侧开始您的位置，而不是设置左侧动画：

@keyframes slide {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

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

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

Answer 2

使用clip-path:

@keyframes slide {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0    0 0 0);
  }
}

.text-slide-in {
  animation: slide 1.5s ease infinite;
}

body {
 background:linear-gradient(90deg,red,lightblue);
}

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

如何使用 CSS 在动画中创建文本幻灯片？

How to create a text slide in animation with CSS?

html

css

animation

css-animations