| 属性名 | animation-direction |
|---|---|
| 値 | <single-animation-direction> [, <single-animation-direction> ]* |
| 値の詳細 | <single-animation-direction> = normal | reverse | alternate | alternate-reverse |
| 初期値 | normal |
| 適用可能要素 | すべての要素 (::before, ::after を含む) |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 10 | 5(-moz) 16 | 4(-webkit) 43 | 15(-webkit) 30 | 4(-webkit) 9 |
アニメーションの実施方向を指定します。アニメーションに関する概要は animation を参照してください。
| 値 | 説明 |
|---|---|
| normal | 開始→終了 の流れでアニメーションを実行します。 |
| reverse | 終了→開始 の流れで実行します。 |
| alternate | 開始→終了→開始→終了... の流れで実行します。アニメーションの実行回数は、開始→終了 で 1回、終了→開始 で 1回とカウントされます。 |
| alternate-reverse | 終了→開始→終了→開始... の流れで実行します。アニメーションの実行回数は、終了→開始 で 1回、開始→終了 で 1回とカウントされます。 |
@keyframes myframe {
from {
color: #66f;
font-size: 20pt;
}
to {
color: #f66;
font-size: 24pt;
}
}
.test {
position: absolute;
animation-name: myframe;
animation-duration: 0.5s;
animation-timing-function: ease-in;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}
<div class="test">A</div>