From be4d1745da36244c196fbfd475a9bee75c746c49 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jan 2022 00:43:54 +0900 Subject: 2022/01/22 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-direction/index.md | 124 +++++++++++++++----------- 1 file changed, 70 insertions(+), 54 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/animation-direction/index.md b/files/ja/web/css/animation-direction/index.md index 88c4f865ce..d48f3cb1d6 100644 --- a/files/ja/web/css/animation-direction/index.md +++ b/files/ja/web/css/animation-direction/index.md @@ -3,26 +3,25 @@ title: animation-direction slug: Web/CSS/animation-direction tags: - CSS - - CSS Animations - - CSS Property - CSS アニメーション - CSS プロパティ - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.animation-direction translation_of: Web/CSS/animation-direction --- -
{{CSSRef}}
+{{CSSRef}} -

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

+[CSS](/ja/docs/Web/CSS) の **`animation-direction`** プロパティは、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。 -
{{EmbedInteractiveExample("pages/css/animation-direction.html")}}
+{{EmbedInteractiveExample("pages/css/animation-direction.html")}} - +アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。 -

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

+## 構文 -

構文

- -
/* 単一のアニメーション */
+```css
+/* 単一のアニメーション */
 animation-direction: normal;
 animation-direction: reverse;
 animation-direction: alternate;
@@ -35,62 +34,79 @@ animation-direction: alternate, reverse, normal;
 /* グローバル値 */
 animation-direction: inherit;
 animation-direction: initial;
+animation-direction: revert;
 animation-direction: unset;
-
+``` + +### 値 + +- `normal` + - : アニメーションを毎回順方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。 +- `reverse` + - : アニメーションを毎回逆方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、タイミング関数も逆になります。例えば、タイミング関数の `ease-in` が `ease-out` になります。 +- `alternate` + - : アニメーションを毎回反転させ、初回は順方向になります。周期が偶数か奇数かを特定する回数は1から始まります。 +- `alternate-reverse` + - : アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります。 -

値

+> **Note:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values)を参照してください。 -
-
normal
-
アニメーションを毎回順方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。
-
reverse
-
アニメーションを毎回逆方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、タイミング関数も逆になります。例えば、タイミング関数の ease-in が ease-out になります。
-
alternate
-
アニメーションを毎回反転させ、初回は順方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
-
alternate-reverse
-
アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
-
+## 公式定義 -
-

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

-
+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 + +### 逆方向に実行されるアニメーション + +#### HTML + +```html +
+``` + +#### CSS + +```css +.box { + background-color: rebeccapurple; + border-radius: 10px; + width: 100px; + height: 100px; + animation-name: rotate; + animation-duration: 0.7s; + animation-direction: reverse; +} + +@keyframes rotate { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} +``` + +#### 結果 -

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

+{{EmbedLiveSample("Examples","100%","250")}} -

仕様書

+[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 -

{{cssinfo}}

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

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- JavaScript の {{domxref("AnimationEvent")}} API -- cgit v1.2.3-54-g00ecf