言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

  1. トップページ
  2. CSS辞典
  3. animation-duration

animation-duration

アニメーション一回分の時間を指定できます。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。またPCのスペックによっては動きがカクついてしまう場合がありますのでご注意下さい。

サンプルコード

div {
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-ms-animation-duration: 3s;
}

ブラウザでの表示結果

div {
	background: #f00;
	width: 200px;
	animation-name: hogeanime1;
	-webkit-animation-name: hogeanime1;
	-moz-animation-name: hogeanime1;
	-ms-animation-name: hogeanime1;
	
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-ms-animation-duration: 3s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}

対応ブラウザ

デスクトップ
Chrome Chrome
43 以降 ○
42 △
41 △
40 △
39 △
38 △
37 △
36 △
35 △
↑ prefix『-webkit-』が必要
2 以前 ×
Firefox Firefox
16 以降 ○
15 △
14 △
13 △
12 △
11 △
10 △
9 △
8 △
↑ prefix『-moz-』が必要
4 以前 ×
Safari Safari
9 以降 ○
8 △
7 △
6 △
5 △
4 △
↑ prefix『-webkit-』が必要
3 以前 ×
Edge Edge
12 以降 ○
全バージョンで対応しています
IE IE
11 ○
10 ○
9 ×
8 ×
7 ×
6 ×
Opera Opera
30 以降 ○
29 △
28 △
27 △
26 △
25 △
24 △
23 △
22 △
↑ prefix『-webkit-』が必要
29 △
28 △
27 △
26 △
25 △
24 △
23 △
22 △
↑ prefix『-o-』が必要
11 以前 ×
モバイル
iOS Safari iOS Safari
9 以降 ○
8 △
7 △
6 △
5 △
↑ prefix『-webkit-』が必要
3 以前 ×
Android Android Browser
43 以降 ○
2 △
↑ prefix『-webkit-』が必要
Chrome Android Chrome Android
最新版 ○
デスクトップ版と同等の対応です
Firefox Android Firefox Android
最新版 ○
デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

概要

アニメーション一回分の時間を指定できます。

『animation』プロパティを使用する際は『animation』の記述とは別に『@keyframes』も指定しなくてはなりませんのでご注意下さい。

『@keyframes』の記述方法は『@keyframes』という記述の後に任意の『アニメーション名』を書き、その後に『{}』で囲い、その中で進行状態に合わせたプロパティの変化を『0%』から『100%』の間で記述します。進行状態は『0%』が開始時、『100%』が終了時です。『0%』は『from』、『100%』は『to』という単語で記述することもできますが、『%』で指定するのが一般的です。

/* 以下のように『{}』で囲い、その中で変化のタイミングと状態を指定します。 */
@keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}

『animation-duration』の値は『,』で区切る事により複数のアニメーションの時間を同時に指定できます。

div {
	background: #f00;
	width: 200px;
	animation-name: hogeanime1, hogeanime2;
	-webkit-animation-name: hogeanime1, hogeanime2;
	-moz-animation-name: hogeanime1, hogeanime2;
	-ms-animation-name: hogeanime1, hogeanime2;
	
	animation-duration: 3s, 2s;
	-webkit-animation-duration: 3s, 2s;
	-moz-animation-duration: 3s, 2s;
	-ms-animation-duration: 3s, 2s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

@keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-webkit-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-moz-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-ms-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}

指定されているアニメーション名(keyframes名)の数より『animation-duration』の値が少ない場合は指定した値が繰り返されているものとして適用されます。

div {
	background: #f00;
	width: 200px;
	height: 50px;
	animation-name: hogeanime1, hogeanime2, hogeanime3;
	-webkit-animation-name: hogeanime1, hogeanime2, hogeanime3;
	-moz-animation-name: hogeanime1, hogeanime2, hogeanime3;
	-ms-animation-name: hogeanime1, hogeanime2, hogeanime3;
	
	animation-duration: 3s, 2s;
	-webkit-animation-duration: 3s, 2s;
	-moz-animation-duration: 3s, 2s;
	-ms-animation-duration: 3s, 2s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

@keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-webkit-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-moz-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-ms-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}

@keyframes hogeanime3 {
	0% { height: 50px;}
	100% { height: 100px;}
}
@-webkit-keyframes hogeanime3 {
	0% { height: 50px;}
	100% { height: 100px;}
}
@-moz-keyframes hogeanime3 {
	0% { height: 50px;}
	100% { height: 100px;}
}
@-ms-keyframes hogeanime3 {
	0% { height: 50px;}
	100% { height: 100px;}
}

指定した『animation-duration』の値がアニメーション名より多い場合は、アニメーション名の数以上の値は無視されます。

div {
	background: #f00;
	width: 200px;
	animation-name: hogeanime1, hogeanime2;
	-webkit-animation-name: hogeanime1, hogeanime2;
	-moz-animation-name: hogeanime1, hogeanime2;
	-ms-animation-name: hogeanime1, hogeanime2;
	
	animation-duration: 3s, 2s, 4s;
	-webkit-animation-duration: 3s, 2s, 4s;
	-moz-animation-duration: 3s, 2s, 4s;
	-ms-animation-duration: 3s, 2s, 4s;
	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

@keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-webkit-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-moz-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}
@-ms-keyframes hogeanime2 {
	0% { background: #f00;}
	100% { background: #ff0;}
}

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

シェアするシェアする
このエントリーをはてなブックマークに追加