简单CSS实现闪烁动画（+1白话讲解）

背景

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

介绍

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

开始操做

原图

字体调回正常啦~

• 想法1: 让元素变成透明再变回原样

.title{
  animation: blink 1s 3;
}
@keyframes blink{
  to {
    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揭秘