Aug. 27th,2021
プロパティについて
＃
概要
| 初期値 | “animation-direction: normal;” |
| 適用対象 | すべての要素 |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定したキーワードをアイテムとするリスト |
| アニメーション | 不可 |
“animation-direction”プロパティは“animation-name”プロパティなどで指定されたアニメーションを通常再生するか逆再生するかを指定するプロパティです。
“animation-direction”プロパティの値を“alternate”もしくは“alternate-reverse”に指定すると“animation-interation-count”プロパティでアニメーションを繰り返した場合に繰り返すたびに再生方向を逆転させることができます。
サンプルコード
div { animation-direction: alternate;}
＃
値
| 値 | 説明 |
|---|---|
| “<single-animation-direction>”値 | |
| normal | アニメーションは通常通り再生されます |
| reverse | アニメーションは逆再生されます |
| alternate | アニメーションは通常の向きで再生され、終わると次は逆再生します (奇数回は通常再生、偶数回は逆再生します。) |
| alternate-reverse | アニメーションは逆再生され、終わると次は通常の向きで再生します (奇数回は逆再生、偶数回は通常再生します。) |
| 他の値 | |
| 共通キーワード | |
＃
複数のアニメーションを指定する
“animation-name”プロパティで複数のアニメーションが指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれのアニメーションの再生方向を指定することができます。値の順番は“animation-name”プロパティで指定した値の順番に対応します。
div {
animation-name: 〚1個目のアニメーション〛,〚2個目のアニメーション〛,〚3個目のアニメーション〛,...;
animation-direction: 〚1個目のアニメーションの再生方向〛,〚2個目のアニメーションの再生方向〛,〚3個目のアニメーションの再生方向〛,...;
}
＃
使用例
＃
＃
＃
再生と逆再生を繰り返す
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
＃
複数のアニメーションを指定する
.sample-box {
animation-name: SampleAnime1, SampleAnime2;
animation-duration: 3s, 3s;
animation-iteration-count: infinite, infinite;
animation-direction: alternate,normal;
}
@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)} /* ■ */
}
