本文介紹如何透過 CSS 來製作出打字動畫與閃爍游標，這個效果用在專案上可以添增一些亮點，視覺效果還滿不錯的，一起來試試看吧！

動畫效果介紹

實現效果如下 GIF 截圖，主要動畫效果分為兩個部分，一個是打字動畫，即文字會由左至右出現，可調整速度，另一個部分是閃爍游標，就是模擬我們輸入文字時會出現的閃爍直槓。

如何實現動畫效果

這個效果透過 HTML 與 CSS 就可以實作出來。

HTML 的部分很簡單，只需要一行即可：

1<div class="typing">我在冒險的起點等你！</div>
2

我們主要都是在針對這個 typing 的 Class 去撰寫 CSS 樣式。

打字動畫效果

我們使用 keyframe 與 animation 來製作動畫。

@keyframes 是在制定動畫的內容，透過關鍵影格選擇器 from 與 to（或者 0% 與 100%）去製作想要完成的效果。

打字效果其實就是以改變外層容器的寬度來實現的，因此這裡的設定就是針對 width 的調整。在範例中我把寬度設定為 10em，因為這剛好是 10 個中文字的寬度。

1@keyframes typing {
2  from {
3    width: 0;
4  }
5  to {
6    width: 10em;
7  }
8}
9

建立好 @keyframes 裡的動畫內容後，接著在想要呈現動畫內容的 Class 底下加入 animation 屬性。

1/* animation: name duration timing-function delay iteration-count direction; */
2.typing {
3  animation: typing 3.5s steps(10, end) infinite;
4}
5

基本上就是填入剛才的 @keyframes 名稱，還有動畫作用時間 (animation-duration) 與作用次數 (iteration-count) 等等。
像這邊我想要讓動畫執行無限次，因此 iteration-count 的值用了 infinite。

補間動畫 (timing-function) 我是使用 CSS3 animation 的 step() 功能，這算是比較少用到的功能。它可以刻意讓動畫變得斷斷續續的，而非順暢地連續執行，因此很適合在這裡，因為打字時本來就是一個字一個字斷斷續續地出現嘛！

關於 steps 的介紹可參考這篇文章：CSS3 animation 屬性中的 steps 功能符深入介紹

閃爍游標效果

游標的部分，原先我是使用 border 製作，並且用 padding 來推開一些空間，這樣邊框才不會貼著文字。
然而，這麼做也導致了 overflow: hidden 在幫我卡掉溢出時，會剪裁得不太乾淨，會出現下一個字提前出現一點點的狀況，影響了動畫整體的呈現。

因此我們可以改成使用 box-shadow 來模擬游標，而動畫內容一樣是使用 @keyframes 與 animation 來製作。

最後就附上完整的 CSS 程式碼給大家吧 😇

1.typing {
2  width: 10em;
3  white-space: nowrap;
4  border-right: 2px solid transparent;
5  animation: typing 3.5s steps(10, end), blinkCursor 0.75s step-end infinite;
6  overflow: hidden;
7  letter-spacing: 0;
8}
9/* 打字動畫 */
10@keyframes typing {
11  from {
12    width: 0;
13  }
14  to {
15    width: 10em;
16  }
17}
18/* 閃爍游標 */
19@keyframes blinkCursor {
20  from,
21  to {
22    box-shadow: 2px 0 0 0 transparent;
23  }
24  50% {
25    box-shadow: 2px 0 0 0;
26  }
27}
28

參考資料

1. #CSS：製作動畫效果－使用 keyframe 與 animation | 新罪楓翼 ☆ 灆洢騎士 - 點部落

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫