We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSSanimation-direction プロパティは、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを指定します。

/* 単一のアニメーション */
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: unset;

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利です。

初期値normal
適用対象全要素、::before / ::after 疑似要素
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

normal
アニメーションを毎回順方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。
reverse
アニメーションを毎回逆方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、タイミング関数も逆になります。例えば、タイミング関数の ease-inease-out になります。
alternate
アニメーションを毎回反転させ、初回は順方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
alternate-reverse
アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります。

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 animation-name プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。

構文形式

<single-animation-direction>#

where
<single-animation-direction> = normal | reverse | alternate | alternate-reverse

CSS アニメーションを参照してください。

仕様書

仕様書 策定状況 コメント
CSS Animations
animation-direction の定義
草案 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

43

あり -webkit-

12

12 -webkit-

16

49 -webkit-

44 -webkit- 1

5 -moz-

10

30

15 -webkit-

12.1 — 15

12 — 15 -o-

あり

4 -webkit-

reverse19121610 あり あり
alternate-reverse19121610 あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

43

あり -webkit-

43

あり -webkit-

あり

あり -webkit-

16

49 -webkit-

44 -webkit- 1

5 -moz-

30

15 -webkit-

12.1 — 15

12 — 15 -o-

あり

あり -webkit-

4.0

あり -webkit-

reverse なし あり あり16 ? なし あり
alternate-reverse ? あり あり16 ? ? あり

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, teoli, ethertank, yyss, FredB
最終更新者: mfuji09,