多线扫右动画

Question

如何在多行文本上进行右扫动画。我希望它首先在上线动画，如果它是完成了，然后在第二行。我们可以假设我们知道每个文本有多少行。这是它现在的工作方式，它是动画的，因为它是一个单行文本。

​

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

​

Answer 1

display应该是inline。另外，你也不需要使用动画。只需使用这样的过渡：

​

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

​