アニメーションの再生時間を指定するには?
要素書式
animation-duration: 【時間】 [, 【時間】...];
対応ブラウザ
- IE 9：×
- Firefox 10.0：○(-moz-animation-duration)
- Opera 11.61：×
- Chrome 17.0：○(-webkit-animation-duration)
- Safari 5.1：○(-webkit-animation-duration)
※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。
値一覧
| 値 | 内容 |
| 時間 | アニメーションの開始から終了までの時間を指定します。
既定値は0s（０秒）です。 |
解説文
CSSのアニメーションでは、プロパティの値を時間的に変化させることで、要素をアニメーションさせます。
animation-durationプロパティでは、一回のアニメーションの開始から終了までに掛かる時間を指定します。
アニメーションの再生時間は、カンマで区切って複数指定することができます。その場合、アニメーションのキーフレーム名を指定するには？プロパティで対応する順番に指定されたアニメーションが、それぞれの値の適用される対象となります。
例えば、animation-nameプロパティで、カンマ区切りで２番目に指定したアニメーションの再生時間は、animation-durationプロパティで、カンマ区切りで２番目に指定した値の長さになります。
以下のように指定した場合、animation1が5sに対応し、animation2が10sに対応します。
animation-name: animation1, animation2;
animation-duration: 5s, 10s;
負の値が指定された場合は、0 が指定されたものとみなされます。
以下の例では、myanimationという名前で@keyframesで定義されたアニメーションについて、全体を 3 秒間として再生するという指定を行っています。
animation-name:myanimation;
animation-duration:3s;
サンプルソース
<!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;
-moz-animation-name:myanimation;
-moz-animation-duration:5s;
-webkit-animation-name:myanimation;
-webkit-animation-duration:5s;
}
</style>
</head>
<body>
<p>背景の色を変化させつつ回転する、５秒間のアニメーションを表示します。</p>
<img id="o" src="penguin.png">
</body>
</html>
下記画像を、サンプルソースで指定しているフォルダに保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。
関連項目
