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

@keyframesインターフェースは、CSSアニメーションのタイムラインにおける特定の時点でのスタイル変化を定義するためのインターフェースです。これは、要素が時間とともにどのように視覚的に変化するかを細かく制御することを可能にします。

このインターフェースは、一連のキーフレームルールで構成され、それぞれのアニメーションには一意の名前が割り当てられます。この名前は、CSSのanimation-nameプロパティを通じてHTML要素に適用され、特定のアニメーションを実行するために参照されます。キーフレームルールでは、アニメーションの開始点（fromまたは0%）から終了点（toまたは100%）までの任意の時点をパーセンテージで指定し、その時点での要素のスタイルを設定します。例えば、アニメーションの50%進行時における要素のスタイルを定義することで、中間的な状態を詳細に制御することが可能です。

@keyframesインターフェースを使用することで、単純な視覚効果だけでなく、複数のプロパティが同時に変化する複雑な動きや、特定のパスに沿ったアニメーションなどを柔軟に実装できます。これにより、開発者は再利用可能なアニメーションパターンを定義し、ウェブページの動的な表現力とユーザーエクスペリエンスの向上に貢献することができます。

Copy
1@keyframes myAnimationName {
2  0% {
3    opacity: 0;
4    transform: translateX(0);
5  }
6  50% {
7    opacity: 0.5;
8    transform: translateX(50px);
9  }
10  100% {
11    opacity: 1;
12    transform: translateX(100px);
13  }
14}

引数なし

引数はありません

戻り値なし

戻り値はありません