一度に1文字ずつフェードイン/エクスポーズする方法は？

Question

私のウェブページが読み込まれるとき、CSSを使って、誰かが手作業で書いているかのように、 "ウィジェットワールド"というテキストを一番上に表示します。一度に1文字ずつ表示されます。

私は筆記体フォントを使用します。出現する各文字の間に数ミリ秒の遅延があります。

私は、それぞれの文字を別のdivにして、それを1つずつ消していくと考えました。

Answer 1

あなたが探しているもののスニペットです。

p{ 
 
    color: Pink; 
 
    font-family: "Courier"; 
 
    font-size: 20px; 
 
    margin: 10px 0 0 10px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    width: 30em; 
 
    animation: type 4s steps(60, end); 
 
} 
 

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

<p>Hi folks, this is typing animation using CSS</p>

Answer 2

ここにあなたがどうなるのかの簡単な例です：たぶんこの方法は、あなたに合う

var text = 'Widget World'; 
 

 
var textElements = text.split("").map(function(c) { 
 
    return $('<span id="' + c + '">' + c + '</span>'); 
 
}); 
 

 
var el = $('#letters'); 
 
var delay = 50; // Tune this for different letter delays. 
 
textElements.forEach(function(e, i) { 
 
    el.append(e); 
 
    e.hide(); 
 
    setTimeout(function() { 
 
    e.fadeIn(300) 
 
    }, 100 + i * delay) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="letters"></div>

Answer 3

：インラインブロックの固定幅をとその幅を減少または増加させるアニメーション

div { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    animation: example 2s linear 0s infinite alternate; 
 
} 
 

 
@keyframes example { 
 
    from { 
 
    width: 0; 
 
    } 
 
    to { 
 
    width: 150px; 
 
    } 
 
}

<div>some text</div>