animation-direction
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
animation-direction
は CSS のプロパティで、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。
試してみましょう
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation
プロパティを使用すると便利です。
構文
/* 単一のアニメーション */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* 複数のアニメーション */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* グローバル値 */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;
値
normal
-
アニメーションを毎回順方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。
reverse
-
アニメーションを毎回逆方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、イージング関数も逆になります。例えば、イージング関数の
ease-in
がease-out
になります。 alternate
-
アニメーションを毎回反転させ、初回は順方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
alternate-reverse
-
アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
メモ: animation-*
プロパティにカンマ区切りで複数の値を指定した場合、 animation-name
に現れる順にアニメーションに適用されます。アニメーションの数と animation-*
プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。
メモ: CSS スクロール駆動アニメーション を作成するとき、 animation-direction
を指定すると期待通りに動作します。例えば、reverse
を指定すると、タイムラインの進行の過程でアニメーションが逆に実行されます。alternate`の値(animation-iteration-count
と結合子)を指定すると、タイムラインの進行に合わせてアニメーションを前後に実行させます。
公式定義
形式文法
例
逆方向に実行されるアニメーション
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
animation-direction: reverse;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
結果
例については CSS アニメーションを参照してください。
仕様書
Specification |
---|
CSS Animations Level 1 # animation-direction |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS アニメーションの使用
- JavaScript の
AnimationEvent
API - その他のアニメーション関連プロパティ:
animation
,animation-composition
,animation-delay
,animation-duration
,animation-fill-mode
,animation-iteration-count
,animation-name
,animation-play-state
,animation-timeline
,animation-timing-function