本文承接自上文 《CSS实现文字打字动画（+1白话讲解）》

提到闪烁动画，很多人可能会想起 <blink> 这个标签，亦或者是 text-decoration: blink 这个东西，但是这两者都有很大的局限性，身为"专业"前端开发者的我们怎么能满足于此呢？所以我们不得不去寻找一些其他的方法。

字体调回正常啦~

.title{
  animation: blink 1s 3;
@keyframes blink{
    color: transparent;
我们用Chrome开发者工具中的Animation看一看这个动画

可以发现..这个元素在变成透明之后会瞬间显现到原来的样子，很江硬，我想把他变成平滑的显现出来，于是想到了一个办法：通过修改关键帧，让其在循环周期中进行状态切换

.title{
  animation: blink 1s 3;
@keyframes blink{
  50% {
    color: transparent;
舒服了一点
但是长了眼睛的读者一定能从图中发现这个动画的过程是加速的，导致这个动画看起来不是很自然
读了我上一篇文章的童鞋们一定会想到steps这个东西~ 让我们来试一哈
.title{
  animation: blink 1s 3 steps(1);
@keyframes blink{
  50% {
    color: transparent;
在这里用to的童鞋注意了，steps(1)表示颜色值的切换只发生在动画周期的末尾，所以效果会变成这样
傻了吧，你的动画是一下都不会闪的

上一篇文章末尾提到了添加一个闪烁的光标，那么我们就用上面学到的知识来实现一下吧~
.title{
  width: 17ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid; //不指定颜色，使光标和文字颜色一致
  animation: typing 10s steps(17),
             blink 1s steps(1) infinite; //infinite用来使动画无限循环
@keyframes typing{
  from {
    width: 0;
@keyframes blink{
  50% {
    border-color: transparent;
因为字体等原因效果展示不是肥肠好，但是应该是最优解啦，还可以通过JS进行维护，这里就不讲啦
文章翻译改编于CSS揭秘