CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけで作るタイプライターアニメーションの実装方法を解説

CSSアニメーションを活用すれば、テキストが一文字ずつ打ち込まれていくような「タイプライターアニメーション」を実現できます。JavaScriptに頼らなくても、CSSのsteps()関数と@keyframesを組み合わせるだけで、この演出効果を簡単に作ることが可能です。

以下に、その具体的な実装例を紹介します。

タイプライターアニメーションの仕組み

このアニメーションでは、主に次のCSSテクニックを組み合わせています。

  • steps()関数：アニメーションをなめらかに変化させるのではなく、段階的に（カクカクと）進めることで、文字が一つずつ打ち込まれるような動きを表現します。
  • overflow: hidden：widthが0%から100%へ変化する際、はみ出したテキストを隠すことで、徐々に文字が現れる効果を生み出します。
  • border-rightと点滅アニメーション：要素の右端にキャレット（カーソル）を模した縦線を表示し、@keyframesで透明と青を交互に切り替えることで、タイピング中のカーソルの点滅を再現します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 2%;
   font-family: Courier, monospace;
   display: inline-block;
}
div > div {
   overflow: hidden;
   animation: enter 4s steps(30, end), blinker .65s step-end infinite;
   white-space: nowrap;
   font-size: 1.4em;;
   border-right: 5px solid blue;
}
@keyframes enter {
   0% {
      width: 0%
   }
   100% {
      width: 100%
   }
}
@keyframes blinker {
   0%, 100% {
      border-color: transparent
   }
   50% {
      border-color: blue;
   }
}
</style>
</head>
<body>
<div class="typewriter">
<div class="typewriter-text">This is what you've been waiting for..</div>
</div>
</body>
</html>

実行結果

このコードをブラウザで表示すると、次のような結果になります。

CSSだけで作るタイプライターアニメーションの実装方法を解説

コードのポイント解説

  • enter アニメーション：4s steps(30, end)により、幅が0%から100%まで30段階に分けて変化します。段階数はテキストの文字数に合わせて調整すると、より自然なタイピング感が得られます。
  • blinker アニメーション：.65s step-end infiniteを指定することで、右側のボーダー（カーソル）が0.65秒ごとに点滅し続けます。
  • white-space: nowrap：テキストの折り返しを防ぎ、一行で表示させるために必須の設定です。

このように、CSSだけでも工夫次第でリッチなテキスト演出を実装できます。ランディングページのキャッチコピーやポートフォリサイトの導入文など、注目を集めたい場面でぜひ活用してみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>