CSSアニメーションプロパティ
CSSアニメーションプロパティには次のものがあります。
- animation-name:キーフレームアニメーションの名前を指定します。
- animation-duration: アニメーションの一周期における持続時間を指定する。
- アニメーションの時間の進度曲線を指定できる。加速や減速が実現できる。
- アニメーションが始まるまでの遅延時間を指定する
- animation-iteration-count: アニメーションの繰り返しの回数を指定します。数値を指定したり、「infinite」として無限に繰り返すこともできます。
- アニメーション方向: アニメ再生の方向を指定します。オプションは “normal”(通常の再生)、”reverse”(逆再生)、”alternate”(正逆再生を交互に繰り返す)、”alternate-reverse”(逆再生と正再生を交互に繰り返す)です。
- animation-fill-mode:アニメーション実行前後にスタイルを適用する方法を指定します。「none」(スタイルを適用しない)、「forwards」(アニメーション終了時のスタイルを使用)、「backwards」(アニメーション開始時のスタイルを使用)、「both」(アニメーション開始時と終了時のスタイルを同時に使用)があります。
- アニメーションプレイ状態:アニメーションの再生状態を指定でき、「running」(実行中)または「paused」(一時停止)があります。
- アニメーション:ショートカットプロパティーを使ってアニメーションの複数のプロパティーを一括設定する。
これらのプロパティは、移動、回転、拡大縮小、フェードイン/フェードアウトなどのさまざまなアニメーション効果を作成するために使用されます。