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-delay/index.html | 87 ----- files/ja/web/css/animation-delay/index.md | 87 +++++ files/ja/web/css/animation-direction/index.html | 96 ------ files/ja/web/css/animation-direction/index.md | 96 ++++++ files/ja/web/css/animation-duration/index.html | 89 ------ files/ja/web/css/animation-duration/index.md | 89 ++++++ files/ja/web/css/animation-fill-mode/index.html | 185 ----------- files/ja/web/css/animation-fill-mode/index.md | 185 +++++++++++ .../web/css/animation-iteration-count/index.html | 89 ------ .../ja/web/css/animation-iteration-count/index.md | 89 ++++++ files/ja/web/css/animation-name/index.html | 91 ------ files/ja/web/css/animation-name/index.md | 91 ++++++ files/ja/web/css/animation-play-state/index.html | 88 ----- files/ja/web/css/animation-play-state/index.md | 88 +++++ .../web/css/animation-timing-function/index.html | 273 ---------------- .../ja/web/css/animation-timing-function/index.md | 273 ++++++++++++++++ files/ja/web/css/animation/index.html | 356 --------------------- files/ja/web/css/animation/index.md | 356 +++++++++++++++++++++ 18 files changed, 1354 insertions(+), 1354 deletions(-) delete mode 100644 files/ja/web/css/animation-delay/index.html create mode 100644 files/ja/web/css/animation-delay/index.md delete mode 100644 files/ja/web/css/animation-direction/index.html create mode 100644 files/ja/web/css/animation-direction/index.md delete mode 100644 files/ja/web/css/animation-duration/index.html create mode 100644 files/ja/web/css/animation-duration/index.md delete mode 100644 files/ja/web/css/animation-fill-mode/index.html create mode 100644 files/ja/web/css/animation-fill-mode/index.md delete mode 100644 files/ja/web/css/animation-iteration-count/index.html create mode 100644 files/ja/web/css/animation-iteration-count/index.md delete mode 100644 files/ja/web/css/animation-name/index.html create mode 100644 files/ja/web/css/animation-name/index.md delete mode 100644 files/ja/web/css/animation-play-state/index.html create mode 100644 files/ja/web/css/animation-play-state/index.md delete mode 100644 files/ja/web/css/animation-timing-function/index.html create mode 100644 files/ja/web/css/animation-timing-function/index.md delete mode 100644 files/ja/web/css/animation/index.html create mode 100644 files/ja/web/css/animation/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/animation-delay/index.html b/files/ja/web/css/animation-delay/index.html deleted file mode 100644 index 858bf36c45..0000000000 --- a/files/ja/web/css/animation-delay/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: animation-delay -slug: Web/CSS/animation-delay -tags: - - Animation - - CSS - - CSS アニメーション - - CSS プロパティ - - Reference - - animation-delay -translation_of: Web/CSS/animation-delay ---- -
{{CSSRef}}
- -

CSS の animation-delay プロパティは、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。

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

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

- -

構文

- -
/* 単一のアニメーション */
-animation-delay: 3s;
-animation-delay: 0s;
-animation-delay: -1500ms;
-
-/* 複数のアニメーション */
-animation-delay: 2.1s, 480ms;
-
- -

値

- -
-
{{cssxref("<time>")}}
-
アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (s) またはミリ秒 (ms) のどちらかで指定できます。単位は必須です。
-
正の数が指定された場合は、アニメーションが始まる経過時間を示します。 0s （既定値）の場合は、アニメーションは適用されたらすぐに始まります。
-
-

負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 -1s を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。

-
-
- -
-

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

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/animation-delay/index.md b/files/ja/web/css/animation-delay/index.md new file mode 100644 index 0000000000..858bf36c45 --- /dev/null +++ b/files/ja/web/css/animation-delay/index.md @@ -0,0 +1,87 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-delay +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}
+ +

CSS の animation-delay プロパティは、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。

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

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

+ +

構文

+ +
/* 単一のアニメーション */
+animation-delay: 3s;
+animation-delay: 0s;
+animation-delay: -1500ms;
+
+/* 複数のアニメーション */
+animation-delay: 2.1s, 480ms;
+
+ +

値

+ +
+
{{cssxref("<time>")}}
+
アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (s) またはミリ秒 (ms) のどちらかで指定できます。単位は必須です。
+
正の数が指定された場合は、アニメーションが始まる経過時間を示します。 0s （既定値）の場合は、アニメーションは適用されたらすぐに始まります。
+
+

負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 -1s を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。

+
+
+ +
+

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

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + 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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/animation-direction/index.md b/files/ja/web/css/animation-direction/index.md new file mode 100644 index 0000000000..88c4f865ce --- /dev/null +++ b/files/ja/web/css/animation-direction/index.md @@ -0,0 +1,96 @@ +--- +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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-duration/index.html b/files/ja/web/css/animation-duration/index.html deleted file mode 100644 index e3dcca408b..0000000000 --- a/files/ja/web/css/animation-duration/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: animation-duration -slug: Web/CSS/animation-duration -tags: - - Animation - - CSS - - CSS アニメーション - - CSS プロパティ - - Reference - - animation-duration -translation_of: Web/CSS/animation-duration ---- -
{{CSSRef}}
- -

animation-duration は CSS のプロパティで、1回のアニメーション周期が完了するまでの所要時間を設定します。

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

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

- -

構文

- -
/* 単一のアニメーション */
-animation-duration: 6s;
-animation-duration: 120ms;
-
-/* 複数のアニメーション */
-animation-duration: 1.64s, 15.22s;
-animation-duration: 10s, 35s, 230ms;
-
- -

値

- -
-
{{cssxref("<time>")}}
-
1回のアニメーションの周期にかかる時間。この値は、秒 (s) またはミリ秒 (ms) で指定することができます。値は正の数か0でなければならず、単位は必須です。 0s の値は、既定値ですが、アニメーションを実行しないことを意味します。
-
- -
-

注: 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は 0s と等価に解釈するかもしれません。

-
- -
-

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

-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/animation-duration/index.md b/files/ja/web/css/animation-duration/index.md new file mode 100644 index 0000000000..e3dcca408b --- /dev/null +++ b/files/ja/web/css/animation-duration/index.md @@ -0,0 +1,89 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-duration +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}}
+ +

animation-duration は CSS のプロパティで、1回のアニメーション周期が完了するまでの所要時間を設定します。

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

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

+ +

構文

+ +
/* 単一のアニメーション */
+animation-duration: 6s;
+animation-duration: 120ms;
+
+/* 複数のアニメーション */
+animation-duration: 1.64s, 15.22s;
+animation-duration: 10s, 35s, 230ms;
+
+ +

値

+ +
+
{{cssxref("<time>")}}
+
1回のアニメーションの周期にかかる時間。この値は、秒 (s) またはミリ秒 (ms) で指定することができます。値は正の数か0でなければならず、単位は必須です。 0s の値は、既定値ですが、アニメーションを実行しないことを意味します。
+
+ +
+

注: 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は 0s と等価に解釈するかもしれません。

+
+ +
+

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

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-fill-mode/index.html b/files/ja/web/css/animation-fill-mode/index.html deleted file mode 100644 index a5fc4e219d..0000000000 --- a/files/ja/web/css/animation-fill-mode/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: animation-fill-mode -slug: Web/CSS/animation-fill-mode -tags: - - CSS - - CSS アニメーション - - CSS プロパティ - - リファレンス -translation_of: Web/CSS/animation-fill-mode ---- -
{{CSSRef}}
- -

CSS の animation-fill-mode プロパティは、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。

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

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

- -

構文

- -
/* 単一のアニメーション */
-animation-fill-mode: none;
-animation-fill-mode: forwards;
-animation-fill-mode: backwards;
-animation-fill-mode: both;
-
-/* 複数のアニメーション */
-animation-fill-mode: none, backwards;
-animation-fill-mode: both, forwards, none;
-
- -

値

- -
-
none
-
アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。
-
forwards
-
対象は実行の最後のキーフレームで設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
animation-directionanimation-iteration-count最後のキーフレーム
normal偶数または奇数100% または to
reverse偶数または奇数0% または from
alternate偶数0% または from
alternate奇数100% または to
alternate-reverse偶数100% または to
alternate-reverse奇数0% または from
-
-
backwards
-
アニメーションは最初の適切なキーフレームで定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。 - - - - - - - - - - - - - - - - - -
animation-direction最初の適切なキーフレーム
normal または alternate0% または from
reverse または alternate-reverse100% または to
-
-
both
-
アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。
-
- -
-

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

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

以下の例で animation-fill-mode の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます（既定の状態）。

- -

HTML

- -
<p>マウスを灰色のボックスの上に乗せてください！</p>
-<div class="demo">
- <div class="growsandstays">これは大きくなって大きいままになります。</div>
-  <div class="grows">これは大きくなるだけです。</div>
-</div>
- -

CSS

- -
.demo {
-  border-top: 100px solid #ccc;
-  height: 300px;
-}
-
-@keyframes grow {
-  0% { font-size: 0; }
-  100% { font-size: 40px; }
-}
-
-.demo:hover .grows {
-  animation-name: grow;
-  animation-duration: 3s;
-}
-
-.demo:hover .growsandstays {
-  animation-name: grow;
-  animation-duration: 3s;
-  animation-fill-mode: forwards;
-}
- -

{{EmbedLiveSample('Example',700,300)}}

- -

これ以外の例は CSS アニメーションを参照してください。

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.animation-fill-mode")}}

- -

関連情報

- - diff --git a/files/ja/web/css/animation-fill-mode/index.md b/files/ja/web/css/animation-fill-mode/index.md new file mode 100644 index 0000000000..a5fc4e219d --- /dev/null +++ b/files/ja/web/css/animation-fill-mode/index.md @@ -0,0 +1,185 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - リファレンス +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}
+ +

CSS の animation-fill-mode プロパティは、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
+ + + +

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

+ +

構文

+ +
/* 単一のアニメーション */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* 複数のアニメーション */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

値

+ +
+
none
+
アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。
+
forwards
+
対象は実行の最後のキーフレームで設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-count最後のキーフレーム
normal偶数または奇数100% または to
reverse偶数または奇数0% または from
alternate偶数0% または from
alternate奇数100% または to
alternate-reverse偶数100% または to
alternate-reverse奇数0% または from
+
+
backwards
+
アニメーションは最初の適切なキーフレームで定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。 + + + + + + + + + + + + + + + + + +
animation-direction最初の適切なキーフレーム
normal または alternate0% または from
reverse または alternate-reverse100% または to
+
+
both
+
アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。
+
+ +
+

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

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

以下の例で animation-fill-mode の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます（既定の状態）。

+ +

HTML

+ +
<p>マウスを灰色のボックスの上に乗せてください！</p>
+<div class="demo">
+ <div class="growsandstays">これは大きくなって大きいままになります。</div>
+  <div class="grows">これは大きくなるだけです。</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}
+ +

{{EmbedLiveSample('Example',700,300)}}

+ +

これ以外の例は CSS アニメーションを参照してください。

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.animation-fill-mode")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-iteration-count/index.html b/files/ja/web/css/animation-iteration-count/index.html deleted file mode 100644 index 879bd8c307..0000000000 --- a/files/ja/web/css/animation-iteration-count/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: animation-iteration-count -slug: Web/CSS/animation-iteration-count -tags: - - CSS - - CSS アニメーション - - CSS プロパティ - - CSS プロパティアニメーション - - Reference -translation_of: Web/CSS/animation-iteration-count ---- -
{{CSSRef}}
- -

CSS の animation-iteration-count プロパティは、停止するまでにアニメーション周期が再生される回数を指定します。

- -

複数の値が指定された場合、アニメーションが再生されるたびにリスト中の次の値が使用され、最後の1つが使用されたら最初に戻ります。

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

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

- -

構文

- -
/* キーワード値 */
-animation-iteration-count: infinite;
-
-/* <number> 値 */
-animation-iteration-count: 3;
-animation-iteration-count: 2.4;
-
-/* 複数の値 */
-animation-iteration-count: 2, 0, infinite;
- -

animation-iteration-count プロパティは1つ以上のコンマで区切られた値で指定します。

- -

値

- -
-
infinite
-
アニメーションは無制限に繰り返されます。
-
{{cssxref("<number>")}}
-
アニメーションが繰り返される回数です。既定値は 1 です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 0.5 はアニメーション周期の半分を再生します。負の数は無効です。
-
- -
-

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

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.animation-iteration-count")}}

- -

関連情報

- - diff --git a/files/ja/web/css/animation-iteration-count/index.md b/files/ja/web/css/animation-iteration-count/index.md new file mode 100644 index 0000000000..879bd8c307 --- /dev/null +++ b/files/ja/web/css/animation-iteration-count/index.md @@ -0,0 +1,89 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - CSS プロパティアニメーション + - Reference +translation_of: Web/CSS/animation-iteration-count +--- +
{{CSSRef}}
+ +

CSS の animation-iteration-count プロパティは、停止するまでにアニメーション周期が再生される回数を指定します。

+ +

複数の値が指定された場合、アニメーションが再生されるたびにリスト中の次の値が使用され、最後の1つが使用されたら最初に戻ります。

+ +
{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}
+ + + +

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

+ +

構文

+ +
/* キーワード値 */
+animation-iteration-count: infinite;
+
+/* <number> 値 */
+animation-iteration-count: 3;
+animation-iteration-count: 2.4;
+
+/* 複数の値 */
+animation-iteration-count: 2, 0, infinite;
+ +

animation-iteration-count プロパティは1つ以上のコンマで区切られた値で指定します。

+ +

値

+ +
+
infinite
+
アニメーションは無制限に繰り返されます。
+
{{cssxref("<number>")}}
+
アニメーションが繰り返される回数です。既定値は 1 です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 0.5 はアニメーション周期の半分を再生します。負の数は無効です。
+
+ +
+

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

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.animation-iteration-count")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-name/index.html b/files/ja/web/css/animation-name/index.html deleted file mode 100644 index 2f51166bda..0000000000 --- a/files/ja/web/css/animation-name/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: animation-name -slug: Web/CSS/animation-name -tags: - - CSS - - CSS アニメーション - - CSS プロパティ - - Reference -translation_of: Web/CSS/animation-name ---- -
{{CSSRef}}
- -

CSS の animation-name プロパティは、要素に適用される1つまたは複数のアニメーションを設定します。それぞれの名前はアニメーションシーケンスのプロパティ値を定義する {{cssxref("@keyframes")}} @-規則を設定します。

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

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

- -

構文

- -
/* 単一のアニメーション */
-animation-name: none;
-animation-name: test_05;
-animation-name: -specific;
-animation-name: sliding-vertically;
-
-/* 複数のアニメーション */
-animation-name: test1, animation4;
-animation-name: none, -moz-specific, sliding;
-
-/* グローバル値 */
-animation-name: initial
-animation-name: inherit
-animation-name: unset
- -

値

- -
-
none
-
キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。
-
{{cssxref("<custom-ident>")}}
-
アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字 a から z、 数字 0 から 9、 アンダースコア (_)、 ダッシュ (-) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は none, unset, initial, inherit であってはなりません。
-
- -
-

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

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/animation-name/index.md b/files/ja/web/css/animation-name/index.md new file mode 100644 index 0000000000..2f51166bda --- /dev/null +++ b/files/ja/web/css/animation-name/index.md @@ -0,0 +1,91 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +

CSS の animation-name プロパティは、要素に適用される1つまたは複数のアニメーションを設定します。それぞれの名前はアニメーションシーケンスのプロパティ値を定義する {{cssxref("@keyframes")}} @-規則を設定します。

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

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

+ +

構文

+ +
/* 単一のアニメーション */
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+/* 複数のアニメーション */
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* グローバル値 */
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+ +

値

+ +
+
none
+
キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。
+
{{cssxref("<custom-ident>")}}
+
アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字 a から z、 数字 0 から 9、 アンダースコア (_)、 ダッシュ (-) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は none, unset, initial, inherit であってはなりません。
+
+ +
+

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

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-play-state/index.html b/files/ja/web/css/animation-play-state/index.html deleted file mode 100644 index ed4d05392a..0000000000 --- a/files/ja/web/css/animation-play-state/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: animation-play-state -slug: Web/CSS/animation-play-state -tags: - - CSS - - CSS アニメーション - - CSS プロパティ - - Reference -translation_of: Web/CSS/animation-play-state ---- -
{{CSSRef}}
- -

CSS の animation-play-state プロパティは、アニメーションが実行中か停止中かを設定します。

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

停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。

- -

構文

- -
/* 単一のアニメーション */
-animation-play-state: running;
-animation-play-state: paused;
-
-/* 複数のアニメーション */
-animation-play-state: paused, running, running;
-
-/* グローバル値 */
-animation-play-state: inherit;
-animation-play-state: initial;
-animation-play-state: unset;
-
- -

値

- -
-
running
-
アニメーションが現在実行中です。
-
paused
-
アニメーションが現在停止中です。
-
- -
-

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

-
- -

形式文法

- -
{{csssyntax}}
-
- -

{{cssinfo}}

- -

例

- -

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

- -

仕様書

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

ブラウザーの対応

- -

{{Compat("css.properties.animation-play-state")}}

- -

関連情報

- - diff --git a/files/ja/web/css/animation-play-state/index.md b/files/ja/web/css/animation-play-state/index.md new file mode 100644 index 0000000000..ed4d05392a --- /dev/null +++ b/files/ja/web/css/animation-play-state/index.md @@ -0,0 +1,88 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +tags: + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}
+ +

CSS の animation-play-state プロパティは、アニメーションが実行中か停止中かを設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}
+ + + +

停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。

+ +

構文

+ +
/* 単一のアニメーション */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* 複数のアニメーション */
+animation-play-state: paused, running, running;
+
+/* グローバル値 */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

値

+ +
+
running
+
アニメーションが現在実行中です。
+
paused
+
アニメーションが現在停止中です。
+
+ +
+

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

+
+ +

形式文法

+ +
{{csssyntax}}
+
+ +

{{cssinfo}}

+ +

例

+ +

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

+ +

仕様書

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

ブラウザーの対応

+ +

{{Compat("css.properties.animation-play-state")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation-timing-function/index.html b/files/ja/web/css/animation-timing-function/index.html deleted file mode 100644 index 88e522c1a0..0000000000 --- a/files/ja/web/css/animation-timing-function/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: animation-timing-function -slug: Web/CSS/animation-timing-function -tags: - - Animation - - CSS - - CSS アニメーション - - CSS プロパティ - - Reference - - animation-timing-function -translation_of: Web/CSS/animation-timing-function ---- -
{{CSSRef}}
- -

animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

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

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

- -

構文

- -
/* キーワード値 */
-animation-timing-function: ease;
-animation-timing-function: ease-in;
-animation-timing-function: ease-out;
-animation-timing-function: ease-in-out;
-animation-timing-function: linear;
-animation-timing-function: step-start;
-animation-timing-function: step-end;
-
-/* 関数値 */
-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
-animation-timing-function: steps(4, end);
-
-/* 段階関数のキーワード */
-animation-timing-function: steps(4, jump-start);
-animation-timing-function: steps(10, jump-end);
-animation-timing-function: steps(20, jump-none);
-animation-timing-function: steps(5, jump-both);
-animation-timing-function: steps(6, start);
-animation-timing-function: steps(8, end);
-
-/* 複数のアニメーション */
-animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
-
-/* グローバル値 */
-animation-timing-function: inherit;
-animation-timing-function: initial;
-animation-timing-function: unset;
-
- -

タイミング関数は @keyframes 規則内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに animation-timing-function が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から animation-timing-function の適切な値が使用されます。

- -

キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 animation-timing-function のうち 100% または to に指定したものは使用されません。

- -

値

- -
-
{{cssxref("<timing-function>")}}
-
-

{{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。

- -

ステップではないキーワード値 (easy, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ 3 次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップタイミング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。

-
-
ease
-
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。
-
linear
-
cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じで、等しい速度でアニメーションします。
-
ease-in
-
cubic-bezier(0.42, 0, 1.0, 1.0) と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。
-
ease-out
-
cubic-bezier(0, 0, 0.58, 1.0) と同じで、アニメーションは速く始まり、速度を落としながら続きます。
-
ease-in-out
-
cubic-bezier(0.42, 0, 0.58, 1.0) と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。
-
cubic-bezier(p1, p2, p3, p4)
-
ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。
-
steps(n, <jumpterm>)
-
遷移に沿った n 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。例えば、 n が 5 の場合、5つの段階があります。アニメーションが停止する点は、以下の jumpterm によって、アメーションに沿って 0%, 20%, 40%, 60%, 80% となるか、 20%, 40%, 60%, 80%, 100% となるか、アニメーションの 0% と 100% の間で5つの停止点を設定するか、 0% と 100% を含む5つの停止点を設定するか (すなわち 0%, 25%, 50%, 75%, 100%)、の何れかを使用します。 -
-
jump-start
-
アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。
-
jump-end
-
アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。
-
jump-none
-
どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。
-
jump-both
-
0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。
-
start
-
jump-start と同じです。
-
end
-
jump-end と同じです。
-
-
-
step-start
-
steps(1, jump-start) と同じです。
-
step-end
-
steps(1, jump-end) と同じです。
-
- -
-

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

-
- -

形式文法

- -{{csssyntax}} - -

例

- -
-

二次元ベジェの例

- - - -
.ease {
-   animation-timing-function: ease;
-}
-.easein {
-   animation-timing-function: ease-in;
-}
-.easeout {
-   animation-timing-function: ease-out;
-}
-.easeinout {
-   animation-timing-function: ease-in-out;
-}
-.linear {
-   animation-timing-function: linear;
-}
-.cb {
-   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}
- -
{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}}
-
- -
-

段階の例

- - - -
.jump-start {
-   animation-timing-function: steps(5, jump-start);
-}
-.jump-end {
-   animation-timing-function: steps(5, jump-end);
-}
-.jump-none {
-   animation-timing-function: steps(5, jump-none);
-}
-.jump-both {
-   animation-timing-function: steps(5, jump-both);
-}
-.start {
-   animation-timing-function: steps(5, start);
-}
-.end {
-   animation-timing-function: steps(5, end);
-}
-.step-start {
-   animation-timing-function: step-start;
-}
-.step-end {
-   animation-timing-function: step-end;
-}
- -
{{EmbedLiveSample("Step_examples", 600, 200)}}
-
- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.animation-timing-function")}}

- -

関連情報

- - diff --git a/files/ja/web/css/animation-timing-function/index.md b/files/ja/web/css/animation-timing-function/index.md new file mode 100644 index 0000000000..88e522c1a0 --- /dev/null +++ b/files/ja/web/css/animation-timing-function/index.md @@ -0,0 +1,273 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-timing-function +translation_of: Web/CSS/animation-timing-function +--- +
{{CSSRef}}
+ +

animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
+ + + +

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

+ +

構文

+ +
/* キーワード値 */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* 関数値 */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* 段階関数のキーワード */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* 複数のアニメーション */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* グローバル値 */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

タイミング関数は @keyframes 規則内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに animation-timing-function が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から animation-timing-function の適切な値が使用されます。

+ +

キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 animation-timing-function のうち 100% または to に指定したものは使用されません。

+ +

値

+ +
+
{{cssxref("<timing-function>")}}
+
+

{{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。

+ +

ステップではないキーワード値 (easy, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ 3 次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップタイミング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。

+
+
ease
+
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。
+
linear
+
cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じで、等しい速度でアニメーションします。
+
ease-in
+
cubic-bezier(0.42, 0, 1.0, 1.0) と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。
+
ease-out
+
cubic-bezier(0, 0, 0.58, 1.0) と同じで、アニメーションは速く始まり、速度を落としながら続きます。
+
ease-in-out
+
cubic-bezier(0.42, 0, 0.58, 1.0) と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。
+
cubic-bezier(p1, p2, p3, p4)
+
ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。
+
steps(n, <jumpterm>)
+
遷移に沿った n 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。例えば、 n が 5 の場合、5つの段階があります。アニメーションが停止する点は、以下の jumpterm によって、アメーションに沿って 0%, 20%, 40%, 60%, 80% となるか、 20%, 40%, 60%, 80%, 100% となるか、アニメーションの 0% と 100% の間で5つの停止点を設定するか、 0% と 100% を含む5つの停止点を設定するか (すなわち 0%, 25%, 50%, 75%, 100%)、の何れかを使用します。 +
+
jump-start
+
アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。
+
jump-end
+
アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。
+
jump-none
+
どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。
+
jump-both
+
0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。
+
start
+
jump-start と同じです。
+
end
+
jump-end と同じです。
+
+
+
step-start
+
steps(1, jump-start) と同じです。
+
step-end
+
steps(1, jump-end) と同じです。
+
+ +
+

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

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
+

二次元ベジェの例

+ + + +
.ease {
+   animation-timing-function: ease;
+}
+.easein {
+   animation-timing-function: ease-in;
+}
+.easeout {
+   animation-timing-function: ease-out;
+}
+.easeinout {
+   animation-timing-function: ease-in-out;
+}
+.linear {
+   animation-timing-function: linear;
+}
+.cb {
+   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}
+ +
{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}}
+
+ +
+

段階の例

+ + + +
.jump-start {
+   animation-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   animation-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   animation-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   animation-timing-function: steps(5, jump-both);
+}
+.start {
+   animation-timing-function: steps(5, start);
+}
+.end {
+   animation-timing-function: steps(5, end);
+}
+.step-start {
+   animation-timing-function: step-start;
+}
+.step-end {
+   animation-timing-function: step-end;
+}
+ +
{{EmbedLiveSample("Step_examples", 600, 200)}}
+
+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/animation/index.html b/files/ja/web/css/animation/index.html deleted file mode 100644 index 876aeab88d..0000000000 --- a/files/ja/web/css/animation/index.html +++ /dev/null @@ -1,356 +0,0 @@ ---- -title: animation -slug: Web/CSS/animation -tags: - - Animation - - CSS - - CSS アニメーション - - CSS プロパティ - - Reference - - animation-delay - - animation-direction - - animation-duration - - animation-fill-mode - - animation-iteration-count - - animation-name - - animation-play-state - - animation-timing-function -translation_of: Web/CSS/animation ---- -
{{CSSRef}}
- -

CSS の animation 一括指定プロパティは、スタイル間のアニメーションを適用します。これは {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}} の一括指定です。

- -
{{EmbedInteractiveExample("pages/css/animation.html")}}
- - - -
/* @keyframes duration | timing-function | delay |
-iteration-count | direction | fill-mode | play-state | name */
-animation: 3s ease-in 1s 2 reverse both paused slidein;
-
-/* @keyframes duration | timing-function | delay | name */
-animation: 3s linear 1s slidein;
-
-/* @keyframes duration | name */
-animation: 3s slidein;
-
- - - -

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

- -

アニメーションできるプロパティの説明があります。この説明は言うまでもなく CSS トランジションにも有効です。

- -

{{cssinfo}}

- -

構文

- -

animation プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。

- -

それぞれ個別のアニメーションは以下のように定義されます。

- - - -

各アニメーションの定義の中での順序は重要です。{{cssxref("<time>")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。

- -

順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。

- -

値

- -
-
<single-animation-iteration-count>
-
アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。
-
<single-animation-direction>
-
アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。
-
<single-animation-fill-mode>
-
アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。
-
<single-animation-play-state>
-
アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。
-
- -

構文形式

- -{{csssyntax}} - -

例

- -

台風の目

- -
<div class="view_port">
-  <div class="polling_message">
-    Listening for dispatches
-  </div>
-  <div class="cylon_eye"></div>
-</div>
-
- -
.polling_message {
-  color: white;
-  float: left;
-  margin-right: 2%;
-}
-
-.view_port {
-  background-color: black;
-  height: 25px;
-  width: 100%;
-  overflow: hidden;
-}
-
-.cylon_eye {
-  background-color: red;
-  background-image: linear-gradient(to right,
-      rgba(0, 0, 0, .9) 25%,
-      rgba(0, 0, 0, .1) 50%,
-      rgba(0, 0, 0, .9) 75%);
-  color: white;
-  height: 100%;
-  width: 20%;
-
-  -webkit-animation: 4s linear 0s infinite alternate move_eye;
-          animation: 4s linear 0s infinite alternate move_eye;
-}
-
-@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
-        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
-
- -

{{EmbedLiveSample('Cylon_Eye')}}

- -

これ以外の例は CSS アニメーションを参照してください。

- -

アクセシビリティの考慮事項

- -

点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。

- -

アニメーションを停止したり無効にしたりする仕組みを、できれば Reduced Motion Media Query を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。

- - - -

仕様書

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

ブラウザーの対応

- -

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

- -

Quantum CSS のメモ

- - - -

関連情報

- - diff --git a/files/ja/web/css/animation/index.md b/files/ja/web/css/animation/index.md new file mode 100644 index 0000000000..876aeab88d --- /dev/null +++ b/files/ja/web/css/animation/index.md @@ -0,0 +1,356 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - Animation + - CSS + - CSS アニメーション + - CSS プロパティ + - Reference + - animation-delay + - animation-direction + - animation-duration + - animation-fill-mode + - animation-iteration-count + - animation-name + - animation-play-state + - animation-timing-function +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

CSS の animation 一括指定プロパティは、スタイル間のアニメーションを適用します。これは {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}} の一括指定です。

+ +
{{EmbedInteractiveExample("pages/css/animation.html")}}
+ + + +
/* @keyframes duration | timing-function | delay |
+iteration-count | direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+animation: 3s slidein;
+
+ + + +

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

+ +

アニメーションできるプロパティの説明があります。この説明は言うまでもなく CSS トランジションにも有効です。

+ +

{{cssinfo}}

+ +

構文

+ +

animation プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。

+ +

それぞれ個別のアニメーションは以下のように定義されます。

+ + + +

各アニメーションの定義の中での順序は重要です。{{cssxref("<time>")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。

+ +

順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。

+ +

値

+ +
+
<single-animation-iteration-count>
+
アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。
+
<single-animation-direction>
+
アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。
+
<single-animation-fill-mode>
+
アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。
+
<single-animation-play-state>
+
アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。
+
+ +

構文形式

+ +{{csssyntax}} + +

例

+ +

台風の目

+ +
<div class="view_port">
+  <div class="polling_message">
+    Listening for dispatches
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: linear-gradient(to right,
+      rgba(0, 0, 0, .9) 25%,
+      rgba(0, 0, 0, .1) 50%,
+      rgba(0, 0, 0, .9) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+
+ +

{{EmbedLiveSample('Cylon_Eye')}}

+ +

これ以外の例は CSS アニメーションを参照してください。

+ +

アクセシビリティの考慮事項

+ +

点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。

+ +

アニメーションを停止したり無効にしたりする仕組みを、できれば Reduced Motion Media Query を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。

+ + + +

仕様書

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

ブラウザーの対応

+ +

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

+ +

Quantum CSS のメモ

+ + + +

関連情報

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