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

2023年9月10日

この記事では、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>

<!DOCTYPE html>
HTML5の文書型宣言を示します。この行はHTML文書のバージョンとタイプを定義します。
<html lang="ja">
HTML文書のルート要素であり、lang属性を使用して言語を指定しています（ここでは日本語）。
<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）を読み込みます。ページのスタイルを定義するために使用されます。
<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('');

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

@charset "utf-8";
文字セットをUTF-8に設定します。UTF-8は広く使用される文字エンコーディング方式です。
span { animation: color linear 5s infinite; }
span要素にcolorという名前のアニメーションを適用します。アニメーションは線形（linear）のタイミング関数で、5秒ごとに繰り返し（infinite）実行されます。
@keyframes color { ... }
colorという名前のキーフレームアニメーションを定義します。キーフレームアニメーションは、特定のキーポイント（0%、10%、20%、…、100%）で指定したスタイルに対してアニメーションを適用します。
各キーポイントごとに指定されている色は、RGB値を使用して指定されています。たとえば、0%のキーポイントでは赤い色（rgb(223, 20, 20)）になります。
各キーポイントの間でスムーズな色の遷移が行われ、アニメーションが実行されます。

リンク

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！