CSSまたはCSS3アニメーションを使用したリニアワイプテキストエフェクト

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>

Answer 2

このコードは完璧に働いている：

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