偶尔会在网站的首页看到有打字机效果，看着挺酷的，最近研究了一下。

虽然以前看过，但是一直不知道怎么做的，刚开始以为是使用一个div或者span进行遮挡，然后使用动画移动div的位置。但是如果想要看着舒服，还需要动一下文字的位置，这样就比较麻烦了。后来，看了一下网上的做法，发现自己想多了。原来改变文字所在的div、span或者p这些元素的宽高就可以了，先来看看大致的效果。

下面开始来做：

动画很简单，但是如果只是这样的动画效果，明显没有打字机的效果，那么主要问题就是怎么做到每次移动固定的值，这里使用了steps()来规定整个动画的步数，而我设置的是13，意思就是整个动画过程中移动13次。其实这里就是将之前的运动方式（平滑过渡）改成了一帧一帧的方式，具体的用法可以上网找找，这里有一个还不错的博客

结束了？

到这里，可以说大概就完成了。

可是仔细看应该可以发现，动画的过程中，字体有些似乎被遮挡了，特别是如果更改为中文的话，更明显。所以并不太美观，所以下面我们还需要再进行一些美化、更改。

出现上面问题的原因，还是因为每次动画动的时候把握不了更准确的距离，还有每个字符的所占宽度也可能是不同的，这就是最主要的原因，解决了就好了。

在CSS3中新添加了一些长度单位，其中之一就是ch，表示数字0的宽度，而字母和数字的宽度是一样的，所以，我们就用ch来做长度单位。

当然，我们需要配合一个属性来使用，就是font-family，在.line中，添加font-family，属性值为monospace(等宽字体)，这是为了让每个字符都是同样的宽度，包括标点符号。现在的.line：

这时候，我们可以根据自己的需要，将steps()中的值改为对应的字符数(我这里原本就是13，就不需要改了)。

再看效果(放慢之后的效果)：

这样，我们看到的字符就不存在遮挡的情况了。

但是，还没结束，我们再看看中文的情况吧。

我想，这样的情况，不可能会符合要求的吧！那么我们怎么解决呢？

在页面中，单个中文字符的宽度，是英文字符的2倍，那一个英文字符的宽度是1ch，那一个中文字符的宽度就是2ch，所以，我们每一帧动画的位移长度是2ch，那么“我们在一起吧”总共就是12ch，所以总共要走6步，那么我们就设置steps(6)，再来看效果： (完)