css文字闪烁-简单CSS实现闪烁动画（+1白话解释）

背景

本文继承于上面的文章《CSS实现文字打字动画（+1白话解释）》

介绍

说到flash动画，很多人可能会想到这个标签，或者文字装饰：眨眼，但这三个都有很大的局限性。 作为“专业”的前端开发者，我们又怎能对此感到满意呢？ 所以我们必须找到一些其他的技巧。

开始运行

原始图像

字体调整回正常啦~

.title{
  animation: blink 1s 3;
}
@keyframes blink{
  to {
    color: transparent;
  }
}

我们使用Chrome开发者工具中的Animation来看看这个动画

你可以发现，把它设为透明后css文字闪烁，这个元素立刻就显露出原来的样子，非常生硬。 我想让它顺利突出css文字闪烁，所以我想到了一个办法：通过改变关键帧，让它在循环过程中突出。 状态切换

.title{
  animation: blink 1s 3;
}
@keyframes blink{
  50% {
    color: transparent;
  }
}

舒服一点

不过，有眼睛的读者一定会从图中注意到，动画进程被加速，导致动画看起来不太自然。

看过我上一篇文章的童鞋一定会想到步骤吧~快来尝试一下吧

.title{
  animation: blink 1s 3 steps(1);
}
@keyframes blink{
  50% {
    color: transparent;
  }
}

完美的

这里的童鞋注意一下，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解密