快速實作 CSS3 打字動畫

如果程式碼也會自己出現就好了…

今天來點輕鬆的。

前陣子看了某個面試者的履歷網站，封面有個打字的動畫效果，雖然以前也很常看到，但沒有實際用 CSS 來實作過，只有在 CSS SECRETS 上看過做法，趁著心血來潮就來玩玩吧！

主要概念

要有打字效果的動畫，主要就是必須讓文字一個一個出現，因此我們可以利用 overflow 與調整包含文字的元素寬度，來達到這個效果。

index.html
1
<h1> 我要成為神奇寶貝大師！ </h1>
typing.css
1
2
3
4
5
6
7
8
9
@keyframes typing {
  from { width: 0 }
}
h1 {
  width: 11em;
  overflow: hidden;
  animation: typing 6s;
}

這邊的文字寬度，要去算你包含文字的那個元素所設定的 font-size，並乘上你的字數。

出來的結果如下：

Typing1

搞啥啊！這什麼鬼 XD

兩個問題：

  1. 寬度會影響行數，就算 overflow: hidden，文字會折行這件事情並不會消失。
  2. 文字並沒有真正的逐格出現

Solution

第一個問題好解決，我們可以加上 white-space: nowrap。
第二個問題就必須借助 CSS 中 animation 的一個屬性值：steps()

通常我們在用 CSS 的 animatin 時，多數會使用 linear, ease-in-out, cubic-bezier 等等的 Speed Curve，這些依照貝茲曲線為主的函式會在關鍵影格中間插入過渡動畫，在一般的使用場景中非常適用，畢竟沒人想要讓動畫看起來卡卡的。

但是在打字動畫中，我們就是需要讓動畫看起來卡卡的 XD

所以我們可以利用這個較少人討論的 steps() 函式來實作。

steps() 會根據你輸入的步驟數，用影格切割動畫，不補入過渡動畫。

我們調整剛剛的 CSS 如下：

typing.css
1
2
3
4
5
6
7
8
9
10
@keyframes typing {
  from { width: 0 }
}
h1 {
  width: 11em;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(11)
}

沒有換行，且一格一格出現文字

Enhancement

但既然是打字，沒有游標怎麼可以。來加強一下。

閃爍游標的做法很多種，這邊我們採取最簡單的方式，由於我們是利用調整元素寬度去控制文字出現，因此可以直接加入一個右邊框，並調整其 transparent。

typing.css
1
2
3
4
5
6
7
8
9
10
11
12
@keyframes caret {
  50% { border-color: transparent; }
}
h1 {
  width: 11em;
  border-right: .05em solid;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(11),
    caret 1s steps(1) infinite;
}

加入閃爍游標

短短五分鐘，純 CSS 的打字效果動畫就出來囉！

Live 範例：


皮卡丘！就決定是你了！