纯 css 实现：单行文本的打字机动画效果

2022 年 7 月 29 日
本文字数：1941 字
阅读完需：约 6 分钟

前言

今天准备给个人博客的时间线页面添加一个动态打字的效果，之前的打字机效果我一直用 JS 实现的，不过今天我打算来尝试一下用 css 实现打字机的效果，想法是根据文字盒子的宽度来给文字盒子添加动态变化的宽度，这样做就无法适用于多行文本，说起来，如果使用多行文本做打字机效果的话，除非是满足一定的逻辑场景，不然很考验用户的耐心，因为大多数人并不想一直盯着一个动画看很长时间。

限于 css 实现的方式是文字盒子宽度的变化，所以能做的只是单行文本的打字机效果。

思路

文字是完全展示的，但是通过 css 动画效果，使得文字盒子的宽度从小到大动态变化，这样的话看起来文字也随着盒子宽度的增加而逐渐完全显示。1，光标效果，可以使用伪元素 after 实现，或者直接给文字盒子设置右边框。2，文字盒子的动画效果应该是逐字展示的动画，而不是平滑连贯的。

实现过程

首先把文字的动画过程实现出来：文字要确定不换行，可以使用 white-space: nowrap; ，然后宽度应该为字的总宽度，例子中 15 个字，即 15em，动画从宽度为 0 开始运行。代码如下：

    <style>        @keyframes typing {            from { width: 0 }        }        p {            font-size: 22px;            width: 15em;            white-space: nowrap;            overflow: hidden;            animation: typing 5s; 执行typing动画，在5s内执行完毕        }    </style>
    <p>这是一段文本呀，请用打字机实现</p>

复制代码

运行一下，实现效果如下：

可以看到，动画并没有逐字展现，而是直接平滑连贯的展示出来了，我们可以使用 steps() 来解决平滑过渡的问题。

steps() 有两个参数：参数一是表示动画分割的段数。参数二是表示分成几段后，是由段数的开始帧还是结束帧去执行动画。默认 end。

好了，那么下面让我们来添加 steps() 看一下：

    <style>        @keyframes typing {            from { width: 0 }        }        p {            font-size: 22px;            width: 15em;            white-space: nowrap;            overflow: hidden;            animation: typing 5s steps(15); 执行typing动画，在5s内执行完毕，分15段执行        }    </style>
    <p>这是一段文本呀，请用打字机实现</p>

复制代码

运行一下，实现效果如下：

可以看到，动画已经变成逐帧展示的了~ 离胜利又近了一步！下面就是添加光标了，根据我们的思路，我们来使用右边框来添加边框，边框动画为边框颜色变成黑色，边框为透明边框，这样文字打印结束后光标会有一个消失不见的效果。代码如下：

    <style>        @keyframes typing {            from { width: 0 }        }        @keyframes caret {            50% { border-right-color: #000; }        }        p {            font-size: 22px;            width: 15em;            white-space: nowrap;            overflow: hidden;            animation: typing 5s steps(15), 执行typing动画，在5s内执行完毕，分15段执行                       caret .5s steps(1) infinite; 执行typing动画，在0.5s内执行完毕，分1段执行，循环执行            border-right: 1px solid transparent;
        }    </style>
    <p>这是一段文本呀，请用打字机实现</p>

复制代码

运行一下，实现效果如下：

完美实现，但是后面的光标效果一直在持续，这让我们很是苦恼，因为文字打字机效果完成之后，光标应该消失才对，那么我们该怎么改这个动画呢？我们自然能想到animation-iteration-count ，这个属性定义动画应该播放多少次。

动画 typing 执行的时间是 5s，也就是说，我们要在 5s 后停止 caret 动画即可，这样两个动画执行时间是一样的。 caret 动画每次执行时间是 0.5s，5s 应该执行 10 次，即：

    <style>        @keyframes typing {            from { width: 0 }        }        @keyframes caret {            50% { border-right-color: #000; }        }        p {            font-size: 22px;            width: 15em;            white-space: nowrap;            overflow: hidden;            animation: typing 5s steps(15), 执行typing动画，在5s内执行完毕，分15段执行                       caret .5s steps(1) 10; 执行typing动画，在0.5s内执行完毕，分1段执行，循环执行10次            border-right: 1px solid transparent;
        }    </style>
    <p>这是一段文本呀，请用打字机实现</p>