簡單CSS實現閃爍動畫（+1白話講解）

AddOneG發表於2018-03-15
CSS動畫

背景

本文承接自上文《CSS實現文字打字動畫（+1白話講解）》

介紹

提到閃爍動畫，很多人可能會想起 <blink> 這個標籤，亦或者是text-decoration: blink這個東西，但是這兩者都有很大的侷限性，身為"專業"前端開發者的我們怎麼能滿足於此呢？所以我們不得不去尋找一些其他的方法。

開始操作

原圖

簡單CSS實現閃爍動畫（+1白話講解）

字型調回正常啦~

  • 想法1: 讓元素變成透明再變回原樣
.title{
  animation: blink 1s 3;
}
@keyframes blink{
  to {
    color: transparent;
  }
}
複製程式碼

簡單CSS實現閃爍動畫（+1白話講解）
我們用Chrome開發者工具中的Animation看一看這個動畫

簡單CSS實現閃爍動畫（+1白話講解）
可以發現..這個元素在變成透明之後會瞬間顯現到原來的樣子，很江硬，我想把他變成平滑的顯現出來，於是想到了一個辦法：通過修改關鍵幀，讓其在迴圈週期中進行狀態切換

.title{
  animation: blink 1s 3;
}
@keyframes blink{
  50% {
    color: transparent;
  }
}
複製程式碼

簡單CSS實現閃爍動畫（+1白話講解）
舒服了一點
簡單CSS實現閃爍動畫（+1白話講解）

但是長了眼睛的讀者一定能從圖中發現這個動畫的過程是加速的，導致這個動畫看起來不是很自然

讀了我上一篇文章的童鞋們一定會想到steps這個東西~ 讓我們來試一哈

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

簡單CSS實現閃爍動畫（+1白話講解）

完美

簡單CSS實現閃爍動畫（+1白話講解）

在這裡用to的童鞋注意了，steps(1)表示顏色值的切換隻發生在動畫週期的末尾，所以效果會變成這樣

簡單CSS實現閃爍動畫（+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;
  }
}
複製程式碼

簡單CSS實現閃爍動畫（+1白話講解）
肥腸完美

因為字型等原因效果展示不是肥腸好，但是應該是最優解啦，還可以通過JS進行維護，這裡就不講啦

文章翻譯改編於CSS揭祕

相關文章