实现文字输入效果

border-color 使用动画控制显示与否，实现文字输入效果。

示例代码：

<h1>Pure CSS Typing animation.</h1>

typing步进动画控制文字显示，cursor-blink动画控制光标闪烁

body {
    background: black;
    color: #fff;
}

h1 {
    font: bold 200% Consolas, Monaco, monospace;
    border-right: 0.1em solid;
    width: 16.5em;
    width: 26ch;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(26, end),
        cursor-blink 0.3s step-end infinite alternate;
}

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

@keyframes cursor-blink {
    50% {
        border-color: transparent;
    }
}