Как анимировать градиент текста с помощью CSS?

Question

Я использую эту анимацию градиента блеска текста CSS3 на моем веб-сайте (http://marekcmarko.xyz),, но он продолжает мигать, если вы прокручиваете сайт и останавливаетесь на заголовках, где он применяется:

.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>