“animation-name”プロパティ:アニメーションのキーフレーム

概要

“animation-name”プロパティはアニメーションに使用されるキーフレームを指定します。キーフレームに関する設定は“animation-name”プロパティによって関連付けられる“@keyframes”ルールによって行われます。

サンプルコード

値

複数のアニメーションを指定する

“animation-name”プロパティの値を“,(コンマ)”で区切ったリストとして記述することで複数のキーフレームを関連付けて複数のアニメーションを要素に適用することができます。

“animation-duration”プロパティなどの他のアニメーションのためのプロパティも同様にコンマで区切ることで複数の値のリストとすることができ、それぞれのプロパティの値は記述された順番通りに“animation-name”プロパティの値として記述されたキーフレームによるアニメーションに対応します。

値のリストの長さが異なる場合、不足する値はリストを繰り返すことで補われ、過剰な値は放棄されて使用されません。

仕様書

定義されている仕様書

animation-name

none
<keyframes-name>

キーフレームを指定する

.sample-box {

animation-name: SampleAnime1;
animation-duration: 5s;
animation-iteration-count: infinite;

}

@keyframes SampleAnime1 {

0% { transform: translate(0); }
100% { transform: translate(300px); }

}

アニメーションを適用しない

.sample-box {

animation-name: none;

}

複数のアニメーションを指定する

.sample-box {

animation-name: SampleAnime1,SampleAnime2;
animation-duration: 5s, 10s;
animation-iteration-count: infinite, infinite;

}

@keyframes SampleAnime1 {

0% { transform: translate(0); }
100% { transform: translate(300px); }

}

@keyframes SampleAnime2 {

0% { background-color: rgb(71,209,209)} /* ■ */
20% { background-color: rgb(170,207,83)} /* ■ */
40% { background-color: rgb(248,184,98)} /* ■ */
60% { background-color: rgb(211,56,28)} /* ■ */
80% { background-color: rgb(233,84,107)} /* ■ */
100% { background-color: rgb(180,76,151)} /* ■ */

}