animation-direction

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

animation-direction CSS プロパティは、アニメーションのサイクルごとに逆方向のアニメーションを実行するかを指定します。

アニメーション関連のプロパティをまとめて設定できる短縮プロパティである animation プロパティを使用すると便利でしょう。

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

構文

書式: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

値

normal: 順方向のアニメーションのみを毎回実行します。言い換えるとアニメーションのサイクルごとに、初期状態にリセットされてからアニメーションが再び始まります。これはデフォルトのアニメーション順の設定です。
alternate: 逆方向のアニメーションも毎回実行します。逆方向のアニメーションを行うときは、初期状態に戻るようなアニメーションになります。また、timing-functions の値も逆になります。例えば ease-in のアニメーションは、逆方向のアニメーションでは ease-out のアニメーションに置き換えられます。
reverse: アニメーションを毎回逆方向に実行します。アニメーションのサイクルごとに、最終状態にリセットされてからからアニメーションが再び始まります。
alternate-reverse: 初回のアニメーションは逆方向に実行し、次は順方向に実行します。これを交互に繰り返します。

例

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

仕様

仕様書	策定状況	コメント
CSS Animations Level 3	草案	2 つの新たな値については、W3C での議論をご覧ください。

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
基本サポート	(有)-webkit	5.0 (5.0)-moz 16.0 (16.0)	10	12-o 12.10 #	4.0-webkit
`reverse`	19	16.0 (16.0)	10	未サポート	未サポート
`alternate-reverse`	19	16.0 (16.0)	10	未サポート	未サポート

機能	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
基本サポート	?	(有)-webkit	5.0 (5.0)-moz 16.0 (16.0)	?	?	?
`reverse`	?	(有)-webkit	16.0 (16.0)	?	?	?
`alternate-reverse`	?	(有)-webkit	16.0 (16.0)	?	?	?

animation-direction

概要

構文

値

例

仕様

ブラウザ実装状況

関連情報

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