Title

animation-durationとは

ここで説明するanimation-duration とは次の語句からなるCSSのプロパティです。

animation

読み: アニメーション
意味: 動画、アニメーション

duration

読み: デュレーション
意味: 持続期間

目次に戻る

animation-durationプロパティの概要

このプロパティは一回のアニメーションの開始から完了するまでの時間を指定します。

要素にアニメーションを付けるためには、 @keyframes によるアニメーションのパターンの定義が必要となります。 また、キーフレームスを呼び出すためには animation-name プロパティで、@keyframes名を指定する必要があります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 このプロパティの記述は以下のような書き方になります。

指定する数値は秒、またはミリ秒の単位を使います。

セレクター{animation-duration: 数値s;}
セレクター{animation-duration: 数値ms;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルでは、 @keyframes で定義したアニメーションパターンを animation-name プロパティでdiv要素に適用しています。

初期値:animation-duration: 0s;

初期値の0sは アニメーションの開始から終了まで時間が0秒になっているので要素はアニメーションしません。

div{
	animation-name: myUp-down;
	animation-duration: 0s;
}

目次に戻る

時間値: アニメーション開始から終了までの時間を指定する

このプロパティではアニメーションが開始してから終了するまでの時間を秒かミリ秒で指定します。 ここでは1回のアニメーションが終了する時間を2秒に設定してみます。

div{
	animation-name: myUp-down;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
@keyframes myUp-down{
	0% { transform: translateY(0)}
	50%{ transform: translateY(-30px)}
	100%{ transform: translateY(0)}
}

• 02: myUp-downというキーフレームスを呼び出します。
• 03: アニメーションが開始してから2秒後に一回のアニメーションが完了します。
• 04: アニメーションの繰り返しを無制限にします。
• 06-10: キーフレームス作成 (要素を位置の原点から上方向に-30pxの位置へ移動し、また原点に戻ります。)

目次に戻る

グローバル値

animation-durationプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値の0sに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{animation-duration: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

animation-duration: 0s;

animation-duration: 2s;

animation-duration: 4s;