Aug. 29th,2021
プロパティについて
概要
| 初期値 |
“animation-duration: 0s;” “animation-timing-function: ease;” “animation-delay: 0s;” “animation-iteration-count: 1;” “animation-direction: normal;” “animation-fill-mode: none;” “animation-play-state: running;” “animation-name: none;” |
| 適用対象 | すべての要素 |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 一括指定が対象とする各プロパティの定義に依る |
| アニメーション | 不可 |
“animation”プロパティは要素に適用されるアニメーションに関する指定をする以下のプロパティの一括指定プロパティです。
- “animation-duration”プロパティ
- “animation-timing-function”プロパティ
- “animation-delay”プロパティ
- “animation-iteration-count”プロパティ
- “animation-direction”プロパティ
- “animation-fill-mode”プロパティ
- “animation-play-state”プロパティ
- “animation-name”プロパティ
アニメーションによってどのように要素に適用されるスタイルが変化するかは、“@keyframes”ルールによって定義されます。
サンプルコード
div { animation: 5s ease-in-out 1s infinite alternate both SampleAnimation;}
値
必要な値をホワイトスペースで区切って記述することができ、初期値のままで良い値は省略できます。一部の値は記述される順序によって解釈のされ方が変わります。他の値は記述する順序は自由です。
“<easing-function>”値、“<single-animation-iteration-count>”値、“<single-animation-direction>”値、“<single-animation-fill-mode>”値、“<single-animation-play-state>”値は1個ずつ記述できます。
“<time>”値は1個もしくは2個記述することができます。1個だけ記述された場合はアニメーションの所要時間を指定する“animation-duration”プロパティの値として扱われます。2個記述された場合は1個目が“animation-duration”プロパティの値として扱われ、2個目がアニメーションの遅延時間を指定する“animation-delay”プロパティの値として扱われます。
“<keyframes-name>”値と“none”はどちらか1個だけ記述できます。なお、“<keyframes-name>”値以外の値としても解釈が可能な文字列はその指定を行う値が先に記述されていない場合には“<keyframes-name>”値ではなく記述されていない方の値として解釈されます。
animation:
〚“animation-duration”を指定する“<time>”値〛 〚“<easing-function>”値〛 〚“animation-delay”を指定する“<time>”値〛 〚“<single-animation-iteration-count>”値〛 〚“<single-animation-direction>”値〛 〚“<single-animation-fill-mode>”値〛 〚“<single-animation-play-state>”値〛 〚“<keyframes-name>”値〛;
複数のアニメーションを指定する
値のセットを“,(コンマ)”で区切って並べて記述することで要素に複数のアニメーションを適用することができます。
animation:
〚1個目のアニメーションの“<time>”値〛 〚1個目のアニメーションの“<easing-function>”値〛 〚1個目のアニメーションの“<time>”値〛 〚1個目のアニメーションの“<single-animation-iteration-count>”値〛 〚1個目のアニメーションの“<single-animation-direction>”値〛 〚1個目のアニメーションの“<single-animation-fill-mode>”値〛 〚1個目のアニメーションの“<single-animation-play-state>”値〛 〚1個目のアニメーションの“<keyframes-name>”値〛,
〚2個目のアニメーションの“<time>”値〛 〚2個目のアニメーションの“<easing-function>”値〛 〚2個目のアニメーションの“<time>”値〛 〚2個目のアニメーションの“<single-animation-iteration-count>”値〛 〚2個目のアニメーションの“<single-animation-direction>”値〛 〚2個目のアニメーションの“<single-animation-fill-mode>”値〛 〚2個目のアニメーションの“<single-animation-play-state>”値〛 〚2個目のアニメーションの“<keyframes-name>”値〛,
〚3個目のアニメーションの“<time>”値〛 〚3個目のアニメーションの“<easing-function>”値〛 〚3個目のアニメーションの“<time>”値〛 〚3個目のアニメーションの“<single-animation-iteration-count>”値〛 〚3個目のアニメーションの“<single-animation-direction>”値〛 〚3個目のアニメーションの“<single-animation-fill-mode>”値〛 〚3個目のアニメーションの“<single-animation-play-state>”値〛 〚3個目のアニメーションの“<keyframes-name>”値〛,
...;
仕様書
定義されている仕様書
 |
|
|---|---|
| |
| animation |   |
|
|
|---|---|
| <time> | |
| <easing-function> | |
| <single-animation-iteration-count> | |
| <single-animation-direction> | |
| <single-animation-fill-mode> | |
| <single-animation-play-state> | |
| <keyframes-name> | |
| none | |
使用例
複数のアニメーションを指定する
.sample-box {
animation: 10s ease-in-out infinite normal SampleAnime1, 5s linear infinite alternate SampleAnime2;
}
@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)} /* ■ */
}
