今天要來做一個很常見又很酷的效果——打字機動畫 (Typewriter Effect)。這個效果可以讓文字像打字一樣，一個字一個字出現，最後停留片刻，再消失，並且不斷循環播放。這種動畫效果常被用在網頁首頁的標題或口號，能讓觀眾一眼就被吸引住。接下來我會用「傳奇選手:Faker」這段文字示範，並逐步解釋程式碼的重點。
<body>
<div class="typewriter">
<h1>傳奇選手:Faker</h1>
</div>
</body>
真正的動畫效果會套用在這個 <h1> 上
.typewriter h1 {
font-size: 4rem;
font-family: 'Courier New', Courier, monospace;
color: #fff;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
animation: typing-cycle 5s steps(10, end) infinite,
blink-caret .75s step-end infinite;
}
這裡是 最重要的核心：
overflow: hidden：隱藏超出容器的文字，讓字能逐漸顯示。
white-space: nowrap：避免自動換行。
border-right: .15em solid orange：右邊加一條橘色細線，當作游標。
animation：
typing-cycle 5s steps(10, end) infinite → 5 秒跑完「打字→停留→刪除」的循環steps(10, end) 代表這句話共有 10 個字元。
blink-caret → 讓游標持續閃爍。
@keyframes typing-cycle {
0% { width: 0 }
40% { width: 100% }
60% { width: 100% }
100% { width: 0 }
}
這是整個效果的時間流程：
0% → 40%：逐字打出來
40% → 60%：停留一小段時間
60% → 100%：刪除文字
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
這個動畫控制游標閃爍，模擬真實打字機的效果
blink-caret 這個動畫的完整播放流程如下：
動畫開始 (0%): 游標是透明的 (看不到)
動畫進行到一半 (50%): 游標變成橘色的 (看得到)
動畫結束 (100%): 游標又變回透明的 (看不到)
iThome鐵人賽
看影片追技術