HTML:animation typewriting

typewriting.html

<h1>CSS is awesome!</h1>

<style>
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-color: currentColor; }
}
h1 {
width: 15ch; /* 文本的宽度 */
overflow: hidden;
/*不让文本折行*/
white-space: nowrap;
/*使用边框模拟光标闪烁效果,并且在不支持时平稳回退为不显示边框*/
border-right: .05em solid transparent;
animation: typing 6s steps(15),
caret 1s steps(1) infinite;
}
</style>
<script>
/*根据文字长度动态调整动画,文本宽度*/
$$('h1').forEach(function(h1) {
var len = h1.textContent.length, s = h1.style;
s.width = len + 'ch';
s.animationTimingFunction = "steps("+len+"),steps(1)";
});
</script>