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

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

本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab

背景

本文承接自上文《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揭秘