How to animate or transition multiple linear-gradient backgrounds from a single element

Trying to emulate this Codepen but with a single link element and the animated underline wraps with the text. https://codepen.io/dragontheory/pen/JjorrKL

One way to have an underline wrap with the text is to use background linear gradients. Like this solid line at this Codepen...

https://codepen.io/dragontheory/pen/XWJydQE

Then add three identical background linear-gradients colored the same as the background.

Not sure if backgroundColor or currentBackgroundColor (like currentColor) - is a valid property...

Three identical 6x1 background linear gradient shapes:

linear-gradient(backgroundColor, backgroundColor) left bottom / 6px 1px no-repeat,
linear-gradient(backgroundColor, backgroundColor) left bottom / 6px 1px no-repeat,
linear-gradient(backgroundColor, backgroundColor) left bottom / 6px 1px no-repeat;

Then animate or transition them on top of the solid underline (from left bottom to right bottom), giving the illusion of broken lines.
And then stagger them (see first Codepen above).

  /* Staggered delay */
  animation: break01 2s infinite,
             break02 2s 0.5s infinite,
             break03 2s 1s infinite;

}
@-webkit-keyframes "break01" {
  from { background-position: left bottom; }
  to { background-position: right bottom; }
}
@-webkit-keyframes "break02" {
  from { background-position: left bottom; }
  to { background-position: right bottom; }
}
@-webkit-keyframes "break03" {
  from { background-position: left bottom; }
  to { background-position: right bottom; }
}

So the question is how to animate or transition multiple linear-gradient backgrounds from a single element?

Hope that makes sense.

No idea if this is the best way. Open to ideas.

Anyone?

Comments

[Vallek]

You need to write positions for each gradient in each @keyframe as comma-separated values for background-position. And then change them individually for different animations. Like this:

to {background-position: right bottom, left bottom, left bottom;}

PS I know it's an old question, but I got here from google so maybe it will help someone.