アニメーションのディレイを指定するには？ - animation-delayの解説

アニメーションのディレイを指定するには?

要素書式

animation-delay: 【時間】 [, 【時間】...];

対応ブラウザ

IE 9：×
Firefox 10.0：○(-moz-animation-delay)
Opera 11.61：×
Chrome 17.0：○(-webkit-animation-delay)
Safari 5.1：○(-webkit-animation-delay)

※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。

値一覧

値	内容
時間	アニメーションが始まるまでの待ち時間を指定します。既定値は0s（０秒、待ち時間なしにすぐにアニメーションを開始する）です。

解説文

CSSのアニメーションでは、プロパティの値を時間的に変化させることで、要素をアニメーションさせます。

animation-delayプロパティには、アニメーションの開始までの待ち時間を指定します。このプロパティに指定された時間が過ぎた後になって、アニメーションが開始されます。

アニメーション開始までの待ち時間は、カンマで区切って複数指定することができます。その場合、アニメーションのキーフレーム名を指定するには？プロパティで対応する順番に指定されたアニメーションが、それぞれの値の適用される対象となります。

例えば、animation-nameプロパティで、カンマ区切りで２番目に指定したアニメーションが始まるまでの待ち時間は、animation-delayプロパティで、カンマ区切りで２番目に指定した値になります。

以下のように指定した場合、animation1が3sに対応し、animation2が4sに対応します。

animation-name: animation1, animation2;
animation-delay: 3s, 4s;

負の値が指定された場合は、アニメーションそのものはすぐに始まりますが、0 秒として解釈されるわけではなく、指定の秒数前から開始していたかのように、指定の秒数に相当する変化が進んだ状態で始まります。

以下の例では、myanimationという名前で@keyframesで定義されたアニメーションについて、1 秒待ったうえで全体を 3 秒間として再生するという指定を行っています。

animation-name:myanimation; 
animation-duration:3s;
animation-delay:1s;

サンプルソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

   /* myanimationという名前のアニメーションの内容を定義します */

   /* 標準 */
   @keyframes myanimation{
       from{ transform:rotate(0deg); background-color:green;}
       50%{ transform:rotate(180deg); background-color:yellow;}
       to{ transform:rotate(360deg); background-color:red;}
   }
   
   /* Firefox */
   @-moz-keyframes myanimation{
       from{ -moz-transform:rotate(0deg); background-color:green;}
       50%{ -moz-transform:rotate(180deg); background-color:yellow;}
       to{ -moz-transform:rotate(360deg); background-color:red;}
   }
   
   /* Chrome, Safari */
   @-webkit-keyframes myanimation{
       from{ -webkit-transform:rotate(0deg); background-color:green;}
       50%{ -webkit-transform:rotate(180deg); background-color:yellow;}
       to{ -webkit-transform:rotate(360deg); background-color:red;}
   }
     
   img#o{
       position:absolute;
       top:100px;
       left:100px;
       /* myanimationという名前のアニメーションの再生方法を指定します */
       animation-name:myanimation;
       animation-duration:5s;
       animation-delay:1s;
       -moz-animation-name:myanimation;
       -moz-animation-duration:5s;
       -moz-animation-delay:1s;
       -webkit-animation-name:myanimation;
       -webkit-animation-duration:5s;
       -webkit-animation-delay:1s;
   }
</style>
</head>
<body>
    <p> 1 秒経過してから、背景の色を変化させつつ回転するアニメーションを表示します。</p>
    <img id="o" src="penguin.png">
</body>
</html>

下記画像を、サンプルソースで指定しているフォルダに保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。

animation-delayの解説