【CSS Modules】animation-nameプロパティの使い方
animation-nameプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
animation-nameプロパティは、HTML要素に適用するCSSアニメーションの名前を保持するプロパティです。このプロパティは、Webページ上で要素に動きや視覚効果を与えるCSSアニメーションの仕組みにおいて、どの特定のアニメーションルールを使用するかを識別するために不可欠です。
CSSアニメーションを作成する際、まず@keyframesルールを使用して、アニメーションの開始状態から終了状態、または途中の複数の状態（フレーム）における要素のスタイル変化を定義します。この@keyframesルールには、そのアニメーションを一意に識別するための名前（例えばfade-inやslide-leftなど）を付けます。
そして、特定のHTML要素に対してこのアニメーションを適用したい場合、その要素のanimation-nameプロパティに、@keyframesで定義したアニメーションの名前を指定します。これにより、ブラウザはその要素に対して指定されたアニメーションルールを実行し、定義された動きが要素に適用されます。
例えば、@keyframes bounceという名前で定義されたアニメーションがある場合、あるdiv要素にanimation-name: bounce;と設定することで、そのdiv要素はバウンドする動きを始めます。
複数のアニメーションを同時に一つの要素に適用したい場合は、animation-nameプロパティの値としてカンマ（,）で区切って複数のアニメーション名を記述することができます。このプロパティの初期値はnoneであり、アニメーションが適用されていない状態を示します。animation-nameプロパティは、CSSアニメーションを要素に紐付け、その動きを実現するための重要な役割を担うプロパティです。
構文(syntax)
1animation-name: myAnimation;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません