如何淡入/一次显示一个字母？

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>