【CSS Modules】@keyframesアットルールの使い方

Copy
1/*
2 * @keyframes は、CSSアニメーションの動きを定義するためのルールです。
3 * ここでは `fadeInOutMove` という名前のアニメーションを定義しています。
4 * アニメーションの各段階（キーフレーム）で適用されるスタイルを指定します。
5 */
6@keyframes fadeInOutMove {
7  /*
8   * アニメーションの開始状態 (0%) を定義します。
9   * 'from' キーワードも同じ意味で使用できます。
10   */
11  0% {
12    opacity: 0; /* 要素は完全に透明 */
13    transform: translateX(0); /* 横方向の移動なし */
14    background-color: #3498db; /* 青色 */
15  }
16
17  /*
18   * アニメーションの中間点 (50%) を定義します。
19   * アニメーションの途中で別のスタイルを適用したい場合に便利です。
20   */
21  50% {
22    opacity: 1; /* 要素は完全に不透明 */
23    transform: translateX(100px); /* 右に100px移動 */
24    background-color: #e74c3c; /* 赤色 */
25  }
26
27  /*
28   * アニメーションの終了状態 (100%) を定義します。
29   * 'to' キーワードも同じ意味で使用できます。
30   */
31  100% {
32    opacity: 0; /* 再び透明 */
33    transform: translateX(0); /* 開始位置に戻る */
34    background-color: #3498db; /* 青色に戻る */
35  }
36}
37
38/*
39 * 定義したアニメーションをHTML要素に適用するためのCSSルールです。
40 * この `.animated-box` クラスを持つ要素が、上記のアニメーションで動きます。
41 */
42.animated-box {
43  width: 100px; /* 要素の幅 */
44  height: 100px; /* 要素の高さ */
45  margin: 50px; /* 見やすいように外側の余白を追加 */
46  border-radius: 8px; /* 角を丸くする */
47  font-family: sans-serif; /* フォントを指定（デモ用） */
48  color: white; /* テキスト色（デモ用） */
49  display: flex; /* テキストを中央に配置（デモ用） */
50  justify-content: center; /* テキストを中央に配置（デモ用） */
51  align-items: center; /* テキストを中央に配置（デモ用） */
52
53  /*
54   * `animation` ショートハンドプロパティを使用して、
55   * 定義したアニメーションを要素に適用します。
56   *
57   * 構文: animation: [アニメーション名] [再生時間] [イージング関数] [繰り返し回数];
58   * - `fadeInOutMove`: 上で定義したアニメーションの名前
59   * - `4s`: アニメーションが1回完了するまでの時間（4秒）
60   * - `ease-in-out`: アニメーションの速度変化（最初と最後がゆっくり）
61   * - `infinite`: アニメーションを無限に繰り返す
62   */
63  animation: fadeInOutMove 4s ease-in-out infinite;
64}

@keyframesは、CSSアニメーションの動きを定義するためのルールです。これは、特定のアニメーションに名前を付け（このサンプルではfadeInOutMove）、そのアニメーションが時間とともにどのように変化するかを詳細に指定するために使用されます。@keyframes自体には引数や戻り値はありません。

このルールの中では、アニメーションの各段階（「キーフレーム」と呼びます）で適用されるCSSスタイルを定義します。アニメーションの開始時点は0%またはfromキーワードで、終了時点は100%またはtoキーワードで指定します。また、アニメーションの途中の動きを定義するために、50%のように任意のパーセンテージで中間点を設けることができます。それぞれのキーフレーム内で、opacity（透明度）、transform（位置や形状の変化）、background-color（背景色）などのCSSプロパティの値を設定することで、要素がどのように変化するかを細かく制御します。例えば、0%で透明な青色の要素が、50%で不透明な赤色になり、右に移動し、100%で再び透明な青色に戻り、元の位置に戻るといった一連の動きを定義しています。

このように定義したアニメーションをHTML要素に適用するには、対象となる要素のCSSにanimationプロパティを設定します。このプロパティは、アニメーション名、再生時間、アニメーションの速度変化のパターン（イージング関数）、繰り返し回数などをまとめて指定するショートハンドです。サンプルでは、.animated-boxクラスにanimation: fadeInOutMove 4s ease-in-out infinite;と指定することで、fadeInOutMoveという名前のアニメーションが4秒かけて、最初と最後がゆっくりになる速度で無限に繰り返されるよう設定されています。これにより、指定されたHTML要素が滑らかで動的な表現を実現できます。

Copy
1/*
2 * @keyframes は、CSSアニメーションの各段階（フレーム）でのスタイルを定義するために使用されます。
3 * ここでは 'slideAndFade' という名前のアニメーションを定義しています。
4 * アニメーションの進行度をパーセンテージ（0% から 100%）で指定し、その時点での要素のスタイルを記述します。
5 */
6@keyframes slideAndFade {
7  /* アニメーション開始時 (0%) のスタイル */
8  0% {
9    transform: translateX(0); /* X軸方向に移動なし */
10    opacity: 1; /* 不透明度100% */
11    background-color: #3498db; /* 初期の色（青） */
12  }
13  /* アニメーション中間点 (50%) のスタイル */
14  50% {
15    transform: translateX(150px); /* 右に150px移動 */
16    opacity: 0.5; /* 不透明度50% */
17    background-color: #e74c3c; /* 中間の色（赤） */
18  }
19  /* アニメーション終了時 (100%) のスタイル */
20  100% {
21    transform: translateX(300px); /* 右に300px移動 */
22    opacity: 1; /* 不透明度100% */
23    background-color: #2ecc71; /* 最終の色（緑） */
24  }
25}
26
27/*
28 * このアニメーションを適用する要素のスタイルです。
29 * 例えば、HTMLで <div class="animated-box"></div> のように使用することを想定しています。
30 */
31.animated-box {
32  width: 100px; /* 要素の幅 */
33  height: 100px; /* 要素の高さ */
34  background-color: #3498db; /* アニメーション開始前の背景色 */
35  margin: 50px; /* ページ内での表示位置調整 */
36  position: relative; /* transformプロパティを安定して使用するため */
37
38  /*
39   * animation プロパティは、定義した @keyframes アニメーションを要素に適用します。
40   * 値の順番は一般的に以下の通りです。
41   * [アニメーション名] [再生時間] [イージング関数] [遅延時間] [繰り返し回数] [再生方向] [塗りつぶしモード]
42   */
43  animation: slideAndFade 4s ease-in-out infinite alternate forwards;
44}
45
46/*
47 * 各 animation プロパティ値の説明:
48 * - animation-name: 'slideAndFade' (上で定義した @keyframes の名前)
49 * - animation-duration: 4s (アニメーションが1回再生される時間)
50 * - animation-timing-function: ease-in-out (アニメーションの進行曲線。開始と終了がゆっくり)
51 * - animation-iteration-count: infinite (アニメーションを無限に繰り返す)
52 * - animation-direction: alternate (アニメーションを往復再生する。順方向 → 逆方向 → 順方向 ...)
53 * - animation-fill-mode: forwards (アニメーション終了後、最後のフレームのスタイルを保持する)
54 */

CSSの@keyframesは、Webページに動きを加えるCSSアニメーションの各段階でのスタイルを定義するために使用するルールです。このサンプルコードではslideAndFadeという名前のアニメーションを定義しており、アニメーションの開始（0%）、中間（50%）、終了（100%）の各時点における要素の移動（transform: translateX）、透明度（opacity）、背景色（background-color）の変化を指定しています。@keyframes自体は特定の引数を受け取ったり、値を返したりすることはありません。

定義したアニメーションを実際に要素に適用するには、例えば.animated-boxのようにセレクタを持つ要素に対してanimationプロパティを使います。サンプルコードでは、animation: slideAndFade 4s ease-in-out infinite alternate forwards;と記述しています。これは、slideAndFadeという名前のアニメーションを4秒かけて再生し、動きの速さを示すイージング関数にはease-in-out（開始と終了がゆっくり）を指定しています。さらに、infiniteで無限に繰り返し、alternateで往復再生し、forwardsでアニメーション終了後に最後の状態を保持するよう設定しています。これにより、要素が指定された動きを滑らかに実行します。