animation-direction

by 3 contributors:

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

概要

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

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

  • 初期値 normal
  • 適用範囲 すべての要素と :before および :after 疑似要素
  • 継承 なし
  • メディア visual
  • 計算値 指定された値
  • アニメーションの可否 不可
  • 正規順序 the unique non-ambiguous order defined by the formal grammar

構文

書式: [ 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) ? ? ?

関連情報

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

Contributors to this page: ethertank, yyss, FredB
最終更新者: ethertank,
サイドバーを隠す