使用CSS或CSS3 animate线性擦除文本效果

Question

如何使用CSS和JavaScript显示带有"线性擦除"效果的文本.怎么做？

<p>Text linear wipe </p>

Answer 1

检查此代码段:

p{
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: linearwipe 6s steps(60, end); 
}

@keyframes linearwipe{ 
  from { width: 0; } 
}  

<p>Text linear wipe </p>