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 --- .../ja/web/css/animation-iteration-count/index.md | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/ja/web/css/animation-iteration-count/index.md (limited to 'files/ja/web/css/animation-iteration-count/index.md') 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")}}

+ +

関連情報

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