From 8b42f444c5c10e0abc2b8015a0a68e3798f9bea9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 Jan 2022 22:56:36 +0900 Subject: CSS animations 系のプロパティを移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-direction/index.html | 96 ------------------------- 1 file changed, 96 deletions(-) delete mode 100644 files/ja/web/css/animation-direction/index.html (limited to 'files/ja/web/css/animation-direction/index.html') diff --git a/files/ja/web/css/animation-direction/index.html b/files/ja/web/css/animation-direction/index.html deleted file mode 100644 index 88c4f865ce..0000000000 --- a/files/ja/web/css/animation-direction/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: animation-direction -slug: Web/CSS/animation-direction -tags: - - CSS - - CSS Animations - - CSS Property - - CSS アニメーション - - CSS プロパティ - - Reference -translation_of: Web/CSS/animation-direction ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/animation-direction.html")}}
- - - -

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("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: unset;
-
- -

値

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

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

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

仕様書

- -

{{cssinfo}}

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}初回定義。
- -

ブラウザーの対応

- -

{{Compat("css.properties.animation-direction")}}

- -

関連情報

- - -- cgit v1.2.3-54-g00ecf