animation-direction:アニメーションの再生方向を指定する
初期値 | normal |
適用対象 | 全ての要素、疑似要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
animation-directionプロパティの説明
animation-direction
は、CSSのアニメーションが再生される向きを指定します。各プロパティで指定されたアニメーションの時間軸に対して順方向、逆方向、前後反転のいずれかの値を設定します。
アニメーション関連のプロパティを一括で制御する場合は、animation
を使用して下さい。
animation-directionに指定できる値
- normal
- アニメーションを順方向に再生します。アニメーションは一回の周期が終わると開始時点に戻ります。これが初期値です。
- reverse
- アニメーションを逆方向に再生します。アニメーションは一回の周期が終わると終了時点に戻ります。この値を指定した場合、タイミング関数も逆になります。例えば、
animation-timing-function
の値がease-in
だった場合、ease-out
になります。 - alternate
- アニメーションを再生するごとに反転します。アニメーションは一回の周期が終わるとその時点から折り返して逆方向に進みます。
- alternate-reverse
- アニメーションが逆方向から始まり再生するごとに反転します。アニメーションは一回の周期が終わるとその時点から折り返して逆方向に進みます。
animation-directionの使い方とサンプル
animation-direction
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* 複数のアニメーション */
animation-direction: normal, reverse;
animation-direction: alternate, alternate-reverse;
/* グローバル値 */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: unset;
animation-directionの実例
それでは簡単な例を見てみましょう。同じ内容のアニメーションに対して別の再生方向を指定した場合は、以下のような挙動となります。
CSS
.samp_box > div {
margin-top: 10px;
width: 6em;
background: #ccc;
text-align: center;
animation-name: as_move;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
}
@keyframes as_move {
from { margin-left: 0%;}
to { margin-left: 80%;}
}
#ad_1 {
animation-direction: normal;
}
#ad_2 {
animation-direction: reverse;
}
#ad_3 {
animation-direction: alternate;
}
#ad_4 {
animation-direction: alternate-reverse;
}
HTML
<div class="samp_box">
<div id="ad_1">順方向</div>
<div id="ad_2">逆方向</div>
<div id="ad_3">双方向</div>
<div id="ad_4">初回逆</div>
</div>
表示確認
animation-directionに関連するCSSプロパティ
アニメーション | |
---|---|
animation | アニメーションに関する指定をまとめて行う |
animation-name | アニメーションの名前を定義する |
animation-duration | アニメーションの再生一回分の時間の長さを指定する |
animation-timing-function | アニメーションの再生タイミングに変化を付ける |
animation-delay | アニメーションが開始するタイミングを指定する |
animation-iteration-count | アニメーションの繰り返し回数を指定する |
animation-direction | アニメーションの再生方向を指定する |
animation-fill-mode | アニメーションが再生されていない時にどのような状態で待機するかを指定する |
animation-play-state | アニメーションを再生させるか一時停止させるか指定する |