linear wipe text effect using CSS or CSS3 animate

Question

How to show text reveal with " linear wipe " effect using CSS and JavaScript. How to do that?

<p>Text linear wipe </p>

Answer 1

Check this snippet:

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

 <p>Text linear wipe </p> 

Answer 2

This code is perfectly working:

CSS:

.linear-wipe{
  white-space: nowrap;
  overflow: hidden; 
  animation: linearwipe 1s steps(100, end); 
  opacity: 1;
  width: 0%;
}

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