多线性扫描向右动画[重复]答案

【问题标题】：Multi Linear Sweep To right animation [duplicate]多线性扫描向右动画[重复]
【发布时间】：2021-03-04 04:19:32
【问题描述】：

如何在多行文本上制作向右扫动动画。我希望它首先在第一行进行动画处理，如果完成，则在第二行进行。我们可以假设我们知道每个文本有多少行。这就是它现在的工作方式，它是单行文本的动画。

    .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%;
        }
    }

&lt;p class="green-hover"&gt;130 W Union Street &lt;br&gt; Pasadena, TX 9999&lt;/p&gt;

【问题讨论】：

在单独的 CSS 中，您应该考虑有意将每一行设为自己的 <p>，在您的示例中，您必须最多使用两个。每个<p> 都有自己的类，这些类将通过animation-timing-function 使用动画，以确保它们一个接一个地触发。试试看

标签： html css

【解决方案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%;
}

&lt;p class="green-hover"&gt;130 W Union Street &lt;br&gt; Pasadena, TX 9999&lt;/p&gt;

【讨论】：