【CSS Modules】animation-durationプロパティの使い方
animation-durationプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
animation-durationプロパティは、CSSアニメーションの1回のサイクルにかかる時間を保持するプロパティです。このプロパティを使用することで、ウェブページ上の要素に適用されたアニメーションが開始されてから終了するまでの再生時間をミリ秒（ms）または秒（s）単位で指定できます。たとえば、「2s」と指定すればアニメーションは2秒かけて実行され、「500ms」と指定すれば0.5秒で実行されます。指定する値が大きいほどアニメーションはゆっくりと、値が小さいほど素早く再生されます。デフォルト値は「0s」であり、この場合アニメーションは再生されません。
このプロパティは、CSSアニメーションの速度を制御するための重要な要素の一つです。アニメーションの動きの速さを調整したい場合に利用します。例えば、要素が画面上をゆっくり移動するようなアニメーションを作成したい場合や、逆に一瞬で変化するようなアニメーションを実装したい場合に、animation-durationの値を適切に設定します。
animation-nameプロパティで指定されたアニメーションが、animation-durationプロパティで定義された時間内で一度完結します。animation-delayプロパティと組み合わせることで、アニメーションが開始されるまでの遅延時間と、その後の再生時間を総合的に制御することが可能です。また、複数のアニメーション関連プロパティを一括で設定できるanimationショートハンドプロパティの一部としても利用されます。ウェブサイトに動的な表現を加えるCSSアニメーションの基本的な動きを理解し、実装する上で欠かせないプロパティの一つです。
構文(syntax)
1.element { 2 animation-duration: 3s; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません