如何使用 CSS 为文本渐变设置动画？

Question

我在我的网站 (http://marekcmarko.xyz) 上使用这个 CSS3 文本闪耀渐变动画，但如果你滚动网站并停在应用它的标题上，它会一直闪烁：

.textShineBlack {
background: linear-gradient(to right, #000 20%, #bada55 30%, #bada44 70%, #000 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 200% auto;
animation: textShine 7s ease-in-out infinite;


@keyframes textShine {
to {
    background-position: 200%;
}

有没有人知道我应该怎么做才能摆脱这种闪烁？我不知道...我无法截屏 - 甚至不知道是否可能。

Answer 1

问题是您将动画设置为无限，因此当它结束时，它将立即重新启动为初始状态。为避免这种情况，您可以在动画中添加 alternate：

.textShineBlack {
  background: linear-gradient(to right, #000 20%, #bada55 30%, #bada44 70%, #000 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 200% auto;
  animation: textShine 7s ease-in-out infinite alternate;
}

@keyframes textShine {
  to {
    background-position: 200%;
  }
}

<h1 class="textShineBlack">SOME text</h1>