Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- animation-name
animation-name
動作させたいアニメーション内容のアニメーション名(keyframes名)を指定できます。アニメーション内容は『@keyframes』で構築します。
ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。またPCのスペックによっては動きがカクついてしまう場合がありますのでご注意下さい。
サンプルコード
div {
animation-name: hogeanime1;
-webkit-animation-name: hogeanime1;
-moz-animation-name: hogeanime1;
-ms-animation-name: hogeanime1;
}
ブラウザでの表示結果
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;
}
@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;}
}
対応ブラウザ
Chrome43 以降 ○
42 △41 △40 △39 △38 △37 △36 △35 △
2 以前 ×
Firefox16 以降 ○
15 △14 △13 △12 △11 △10 △9 △8 △4 以前 ×
Safari9 以降 ○8 △
7 △6 △5 △4 △3 以前 ×
Edge12 以降 ○
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera30 以降 ○29 △28 △27 △26 △25 △24 △23 △22 △29 △28 △27 △26 △25 △24 △23 △22 △
11 以前 ×
iOS Safari9 以降 ○8 △7 △6 △5 △4 △2 以前 ×
Android Browser43 以降 ○4.4 △3 以前 × Chrome Android最新版 ○ Firefox Android最新版 ○概要
動作させたいアニメーション内容のアニメーション名(keyframes名)で指定できます。アニメーション内容は『@keyframes』で構築します。
『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-name』の値は『,』で区切る事により複数のアニメーション名(keyframes名)を同時に指定できます。
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;}
}
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする