Как сделать анимацию слева направо?

Question

[Алексей]

Как переделать анимацию, чтобы цвет менялся слева направо? Сейчас справа на лево.

.text {
  background: linear-gradient(to right, #ffffff,#ffffff,#a6fefd,#14b6b6,#a6fefd,#ffffff,#ffffff,#ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 7s ease-in-out infinite normal;
  -moz-animation: textShine 7s ease-in-out infinite normal;
  -o-animation: textShine 7s ease-in-out infinite normal;
  -webkit-animation: textShine 7s ease-in-out infinite normal;
}

@keyframes textShine {
  50% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

Comments

[Ankhena]

Либо переставить значения bg position так, как вам нужно. Не от 0 до 100, а от 100 до 0.
Либо изменить направление анимации на reverse

Answer 1

[modelair]

animation-direction: reverse;

Comments

[Алексей]

Отлично, спасибо!