如何淡入/一次顯示一個字母？

Question

當我的網頁加載時，使用CSS，我希望文本「小部件世界」出現在頂部，就好像有人正在手動編寫它一樣;一次會出現一封信。

我打算使用草書字體。每個出現的字母之間會有幾毫秒的延遲。

我以爲每個字母都是一個單獨的div，然後逐一淡化它們。

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>