▲TOPへ戻る

【CSS】タイピングしているかのようなテキストアニメーション

typing effect

テキストタイピングエフェクト

今回は、以下のタイピングしているかのようなエフェクトをCSSで作りたいと思います。

welcome to gxy-life!

HTML

<div class="wrapper">
  <div class="typing-text">welcome to gxy-life!</div>
</div>

CSS

.wrapper {
  display: grid;
  place-items: center;
  height: 100vh;
  background: #333;
}
.typing-text {
  width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 4em;
  color: #fff;
  animation: typing 3s steps(20),
    blink 1s step-end infinite
}

@keyframes typing {
  0% {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

2,3行目 : テキストを中央寄せ

8行目 : 1chは、半角英数「0」の幅。
今回は全部で半角文字数20なので、20ch

9行目 : テキストを改行させない

11行目 : タイピングの点滅するバー

15行目 : animation: steps(20)アニメーションを20分割

16行目 : step-end : 最後に一瞬でアニメーション終了時の状態になる

19行目 : アニメーション typing 3秒かけて、20段階で、幅0px → 20ch

25行目 : アニメーション blink 1秒の内、半分は消える

参考

css
【CSS】animation パート1 最低限の設定とアニメーション時間(duration)と繰り返し(infinite)について
css
【CSS】animation パート2 アニメーションの動き(time-function),遅延時間(delay),方向(direction)について

まとめ

  1. 1chは、半角英数「0」の幅
  2. animation: steps(n回)でアニメーションを分割
  3. step-end : 最後に一瞬でアニメーション終了時の状態になる

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇