Multi Linear Sweep To right animation

Question

How to make a sweep to right animation on multi line text. I want it to animate first on top line and if it is finished then on second line. We can assume that we know how much lines have each text. This is how it works now, it animate as it is a single line text.

    .green-hover {
      background: linear-gradient(to right, green, green);
      background-repeat: no-repeat;
      background-size: 0 50%;
      /* transition: background-size 1s 0s; */
    }
    
    .green-hover:hover {
        animation: myanimation 1s;
    }
    
    @keyframes myanimation {
        0% {
            background-size: 0% 100%;
        }
        100% {
            background-size: 100% 100%;
        }
    }

<p class="green-hover">130 W Union Street <br> Pasadena, TX 9999</p>

In alone CSS, you should consider making each line into its own `
` intentionally, in your example you must use two maximum. Each `
` have its own class and these classes will use an animation via an `animation-timing-function` to ensure they trigger one after the other. Try it — AGE, Mar 03 '21 at 20:17

score 1 · Accepted Answer · answered Mar 03 '21 at 20:19

The display should be inline. Also you don't need to use animation. Just use a transition like this:

.green-hover {
  display: inline;
  background: linear-gradient(to right, green, green);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 1s 0s;
}

.green-hover:hover {
  background-size: 100% 100%;
}

<p class="green-hover">130 W Union Street <br> Pasadena, TX 9999</p>

Multi Linear Sweep To right animation

1 Answers1