純 CSS 實現打字效果

剛剛看到這個搜尋樣式,覺得在搜尋前使用 #tag 的方式提醒使用者可用的關鍵字不錯,應該會適合小網站或部落格。

好奇就順便看了下程式碼,發現她的打字效果居然是純 CSS!利用animation配合stepsch(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-modeforwards,也很值得參考:

.js .search--open .terminal__line {
  animation: typing 1s steps(30, end), scaleUp 0.1s forwards;
}

@keyframes scaleUp {
  from {
    height: 0;
  } to {
    height: 1.5em;
  }
}

參考資料

最後更新時間: