簡單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揭祕