快速實作 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 範例:


皮卡丘!就決定是你了!