【CSS Modules】animation省略形プロパティの使い方

animationプロパティは、CSSアニメーションのさまざまな設定値を一括で保持するショートハンドプロパティです。このプロパティを使用することで、要素に適用するアニメーションの継続時間、再生速度の変化を表すタイミング関数、開始までの遅延時間、繰り返し回数、アニメーションの再生方向、アニメーション完了後の状態、そしてアニメーションの再生状態や名前といった、複数の個別プロパティの値を一度にまとめて指定できます。

具体的には、animation-duration（継続時間）、animation-timing-function（タイミング関数）、animation-delay（遅延時間）、animation-iteration-count（繰り返し回数）、animation-direction（再生方向）、animation-fill-mode（完了後の状態）、animation-play-state（再生状態）、animation-name（アニメーション名）といったプロパティを、このanimationプロパティ一つで設定することが可能です。

これにより、個々のアニメーション関連プロパティをそれぞれ記述する手間を省き、CSSコードをより簡潔に、かつ効率的に記述できるようになります。ウェブページに動きや視覚的な効果を追加したい場合に、複雑なアニメーション設定も容易に定義し、管理するための非常に便利な機能です。システムエンジニアを目指す初心者の方にとっても、CSSアニメーションを素早く実装し、コードの可読性を高める上で役立つでしょう。

Copy
1animation: <animation-name> <animation-duration> <animation-timing-function>;

引数なし

引数はありません

戻り値なし

戻り値はありません