ywork2020.com

Title

アニメーションの開始時間を調整する

目次 (INDEX)

animation-delayとは

ここで説明するanimation-delay とは次の語句からなるCSSのプロパティです。
animation
読み: アニメーション
意味: 動画、アニメーション
delay
読み: ディレイ
意味: 遅らせる、延ばす

目次に戻る

animation-delayプロパティの概要

このプロパティは要素に指定したアニメーションの開始時間を調整することができます。

このプロパティを設定した場合、アニメーションの開始フラグから指定した時間を経過した後にアニメーションが始まることになります。 指定できる値は秒または指ミリ秒となります。 また、マイナスの値を指定することで、アニメーション周期の途中から動作を開始させることもできます。

目次に戻る

構文

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

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

目次に戻る

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

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

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

動作に関してはdiv要素が5秒間で左から右に移動するように指定しています。

初期値: 0s;

初期値の0sは、0秒ということです。 アニメーションの開始フラグが立ってから0秒後にアニメーションが開始するということになり、 開始ボタンがクリックされてから直ちにアニメーションが開始されます。

div

div{
	animation-name: myLeft;
	animation-duration: 5s;
	animation-delay: 0s;
}
@keyframes myLeft{
	0% {left: 0;}
	100% {left: 490px;}
}

目次に戻る

時間値: 時間を指定して開始時間を遅らせる

ここでは任意の値として3sを指定してみました。 アニメーションの開始フラグが立ってから3秒後にアニメーションが開始するということになり、 開始ボタンがクリックされてから3秒後にアニメーションが開始されます。

div

div{
	animation-name: myLeft;
	animation-duration: 5s;
	animation-delay: 3s;
}
@keyframes myLeft{
	0% {left: 0;}
	100% {left: 490px;}
}

目次に戻る

時間値: マイナスの値を指定して途中から動作を開始する

負の数を指定した場合には、アニメーションは直ちに開始されますが、 アニメーションは指定した時間が経過した時点から再現されます。 つまりアニメーションの動作は途中から始まります。

このサンプルでは、開始ボタンがクリックされてから2秒経過した時点の動作から開始されます。

div

div{
	animation-name: myLeft;
	animation-duration: 5s;
	animation-delay: -2s;
}
@keyframes myLeft{
	0% {left: 0;}
	100% {left: 490px;}
}

目次に戻る

グローバル値

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

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値の0sに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{animation-delay: グローバル値;}

目次に戻る

補足説明

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

目次に戻る