使用CSS3 Animation实现输入文字动画

单行输入实现
关键点: 宽度单位ch, 使用等宽字体

<h1>hello, my name is MaGua.</h1>

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 { 
    font: bold 200% Consolas, Monaco, monospace;
    border-right: .1em solid;
    width: 24ch; /* 与字符数等值 */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 12s steps(24, end), /* step数等于字数 */
               blink-caret .5s step-end infinite alternate;
}

多行输入实现

<h1 id='header-1'>hello, my name is MaGua.</h1>
<h1 id='header-2'>You're the best mistake I've ever made.</h1>

@keyframes typing { from { width: 0; } }
@keyframes typing2 { to { width: 40ch; } }
@keyframes blink-caret { 50% { border-color: black; } }

#header-1 { 
    font: bold 300% Consolas, Monaco, monospace;
    border-right: .1em solid transparent;
    //width: 100px; /* fallback */
    width: 24ch; /* 与字符数等值 */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 12s steps(24, end), /* step数等于字数 */
               blink-caret .5s step-end 24 alternate;
}
#header-2 { 
    font: bold 300% Consolas, Monaco, monospace;
    border-right: .1em solid transparent;
    width: 0;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing2 20s 12s steps(40, end) forwards, /* step数等于字数 */
               blink-caret .5s 12s step-end infinite alternate;
}

中文实现

<p>敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏</p>

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
p { 
    font: 400 200%;
    border-right: .1em solid;
    width: 53.2ch; /* 1.6625倍字数 */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 16s steps(32, end), /* step数等于字数 */
               blink-caret .5s step-end infinite alternate;
}