メニュー
  1. ホーム
  2. プログラミング
  3. 【CSSアニメーション】1文字ずつ色が移り変わるアニメーション

【CSSアニメーション】1文字ずつ色が移り変わるアニメーション

プログラミング

この記事では、CSSアニメーションを使って文字の色を1文字ずつ切り替えていくプログラミングコードを解説します。

目次

完成形

まずは完成形を見ていきます。

JavaScriptのコードで、文字を１文字ずつspanタグで囲み、CSSアニメーションを使って色を切り替えています。

See the Pen cssanimation-3 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

最初にHTMLの型を入力してh1タグに適当な文字を入力します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, dolorum.</h1>
  <script src="main.js"></script>
</body>
</html>
  1. <!DOCTYPE html>
    HTML5の文書型宣言を示します。この行はHTML文書のバージョンとタイプを定義します。
  2. <html lang="ja">
    HTML文書のルート要素であり、lang属性を使用して言語を指定しています（ここでは日本語）。
  3. <head>
    ページのメタデータや外部リソースへのリンクなど、文書の情報を含むセクションです。
    • <meta charset="UTF-8">
      文書の文字セットをUTF-8に設定します。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">
      ページのビューポート設定を指定します。デバイスの幅に合わせてスケーリングされ、初期拡大率を1.0に設定します。
    • <title>Document</title>
      ページのタイトルを指定します。ブラウザのタブに表示されるタイトルです。
    • <link rel="stylesheet" href="style.css">
      外部のCSSファイル（style.css）を読み込みます。ページのスタイルを定義するために使用されます。
  4. <body>: ページのコンテンツが表示されるセクションです。
    • <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, dolorum.</h1>
      大見出し（<h1>要素）で、テキスト “Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, dolorum.” が表示されます。
    • <script src="main.js"></script>
      外部のJavaScriptファイル（main.js）を読み込みます。ページの動的な振る舞いや機能を追加するために使用されます。

JavaScriptコーディング

次にHTMLで入力した<h1>要素内のテキストをJavaScriptで文字ごとに分割していきます。

let h1 = document.querySelector('h1');
h1.innerHTML = h1.innerText.split('').map((letters, i)=> `<span style="animation-delay: ${i*30}ms">${letters}</span>`).join('');
  1. let h1 = document.querySelector('h1');
    ページ内の最初に見つかる<h1>要素を取得してh1という変数に代入します。
  2. h1.innerHTML = ...
    h1要素の中身を書き換える操作を行います。
  3. .innerText.split('')
    innerTextプロパティで取得したテキストを文字ごとに分割します。これにより、テキストの各文字が配列として得られます。
  4. .map((letters, i) => ...)
    map関数を使用して、各文字ごとに新しい文字列を生成します。アロー関数内の処理は、各文字とそのインデックスに対して実行されます。
  5. <span style="animation-delay: ${i*30}ms">${letters}</span>
    各文字を<span>要素で囲み、アニメーションの遅延を設定します。iは文字のインデックスで、${i*30}msによりアニメーション遅延が設定されます。
  6. .join('')
    map関数で生成された文字列配列を結合して、新しい文字列として返します。
  7. 以上の操作により、<h1>要素内のテキストがアニメーション付きの文字列に置き換わります。

CSSコーディング

最後にCSSでキーフレームを設定し、アニメーションを実装したら完成です。

@charset "utf-8";
span {
  animation: color linear 5s infinite;
}
@keyframes color {
  0% {
    color: rgb(223, 20, 20);
  }
  10% {
    color: rgb(243, 129, 36);
  }
  20% {
    color: rgb(241, 224, 28);
  }
  30% {
    color: rgb(98, 255, 0);
  }
  40% {
    color: rgb(20, 138, 52);
  }
  50% {
    color: rgb(39, 240, 243);
  }
  60% {
    color: rgb(27, 24, 215);
  }
  70% {
    color: rgb(143, 19, 174);
  }
  80% {
    color: rgb(207, 42, 171);
  }
  90% {
    color: rgb(235, 148, 43);
  }
  100% {
    color: rgb(216, 23, 23);
  }
}
  1. @charset "utf-8";
    文字セットをUTF-8に設定します。UTF-8は広く使用される文字エンコーディング方式です。
  2. span { animation: color linear 5s infinite; }
    span要素にcolorという名前のアニメーションを適用します。アニメーションは線形（linear）のタイミング関数で、5秒ごとに繰り返し（infinite）実行されます。
  3. @keyframes color { ... }
    colorという名前のキーフレームアニメーションを定義します。キーフレームアニメーションは、特定のキーポイント（0%、10%、20%、…、100%）で指定したスタイルに対してアニメーションを適用します。
  4. 各キーポイントごとに指定されている色は、RGB値を使用して指定されています。たとえば、0%のキーポイントでは赤い色（rgb(223, 20, 20)）になります。
  5. 各キーポイントの間でスムーズな色の遷移が行われ、アニメーションが実行されます。
プログラミング
目次