剛剛看到這個搜尋樣式，覺得在搜尋前使用 #tag 的方式提醒使用者可用的關鍵字不錯，應該會適合小網站或部落格。
好奇就順便看了下程式碼，發現她的打字效果居然是純 CSS！利用animation配合steps和ch(charactor)這個長度單位來達成，類似這樣：
.js .search--open .terminal__line {
animation: typing 1s steps(30, end), scaleUp 0.1s forwards;
}
/* 依據字數不同，設定不同的steps */
.js .search--open .terminal__line:first-child {
animation-timing-function: steps(20, end), ease;
}
.js .search--open .terminal__line:nth-child(2),
.js .search--open .terminal__line:nth-child(3) {
animation-timing-function: steps(27, end), ease;
}
.js .search--open .terminal__line:nth-child(4) {
animation-timing-function: steps(28, end), ease;
}
@keyframes typing {
from {
width: 0;
}
}
這個方法是 Lea Verou 想到的，她有寫了篇介紹。只是這樣的方法需要字數固定，所以可以看到字數不同的話，step 的次數也需要調整。（字數不固定或許配合 JS 也可以？）
此外，她的scaleUp利用到了animation-fill-mode的forwards，也很值得參考：
.js .search--open .terminal__line {
animation: typing 1s steps(30, end), scaleUp 0.1s forwards;
}
@keyframes scaleUp {
from {
height: 0;
} to {
height: 1.5em;
}
}