How to animate text gradient color to always move in one direction-CodePudding

I have a text that is black and on hover the gradient moves from left to right. But after the hover, the gradient moves back to left. I want it to move on the rigth. How could i achieve that?

This is the example code that i currently use

.gradlr {
  color: #0000;
  background: linear-gradient(90deg, #314199, #54c0c7 50%, #000 0)
    var(--_p, 100%) / 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.4s ease-out;
}
.gradlr:hover {
  --_p: 0%;
}

<h1 >Test</h1>

CodePudding user response：

I updated in the hover, please check and tell me if that what you want ?

.gradlr {
  color: #0000;
  background: linear-gradient(90deg, #314199, #54c0c7 50%, #000 0)
    var(--_p, 100%) / 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.4s ease-out;
}
.gradlr:hover {
  --_p: 85%;
}

<h1 >Test</h1>

CodePudding user response：

This can't be done using transitions, as they can only morph between 2 simple states. To achieve this continuous effect, you would need to use CSS animations.

You can define a keyframe animation which includes at 0% your starting point, 50% your end point, and then at 100% an overshoot to move the gradient further left to reach the starting point again. At that point the animation will restart at 0% and it will look like an infinite animation to the left.

Here's an article to get started: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

CodePudding user response：

Is this what you want ?

you can use to left as first param to linear-gradient :

.gradlr {
  color: #0000;
  background: linear-gradient(to left, #314199, #54c0c7 50%, #000 0)
    var(--_p, 100%) / 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.4s ease-out;
}
.gradlr:hover {
  --_p: 0%;
}

<h1 >Test</h1>