From 7562b5ac56f400ac69a488b154fbc711b685e696 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jan 2022 00:39:02 +0900 Subject: 2022/01/22 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/animation-iteration-count/index.md | 123 ++++++++++++--------- 1 file changed, 73 insertions(+), 50 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/animation-iteration-count/index.md b/files/ja/web/css/animation-iteration-count/index.md index 879bd8c307..faa0249a41 100644 --- a/files/ja/web/css/animation-iteration-count/index.md +++ b/files/ja/web/css/animation-iteration-count/index.md @@ -6,24 +6,24 @@ tags: - CSS アニメーション - CSS プロパティ - CSS プロパティアニメーション - - Reference + - recipe:css-property +browser-compat: css.properties.animation-iteration-count translation_of: Web/CSS/animation-iteration-count --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`animation-iteration-count`** は [CSS](/ja/docs/Web/CSS) のプロパティで、停止するまでにアニメーション周期が再生される回数を指定します。 -

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

+複数の値が指定された場合、アニメーションが再生されるたびにリスト中の次の値が使用され、最後の 1 つが使用されたら最初に戻ります。 -
{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}
+{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}} - +アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。 -

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

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 animation-iteration-count: infinite;
 
 /* <number> 値 */
@@ -31,59 +31,82 @@ animation-iteration-count: 3;
 animation-iteration-count: 2.4;
 
 /* 複数の値 */
-animation-iteration-count: 2, 0, infinite;
+animation-iteration-count: 2, 0, infinite; + +/* グローバル値 */ +animation-iteration-count: inherit; +animation-iteration-count: initial; +animation-iteration-count: revert; +animation-iteration-count: unset; +``` + +**`animation-iteration-count`** プロパティは 1 つ以上のカンマで区切られた値で指定します。 -

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

+### 値 -

値

+- `infinite` + - : アニメーションは無制限に繰り返されます。 +- `{{cssxref("<number>")}}` + - : アニメーションが繰り返される回数です。既定値は `1` です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 `0.5` はアニメーション周期の半分を再生します。負の数は無効です。 -
-
infinite
-
アニメーションは無制限に繰り返されます。
-
{{cssxref("<number>")}}
-
アニメーションが繰り返される回数です。既定値は 1 です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 0.5 はアニメーション周期の半分を再生します。負の数は無効です。
-
+> **Note:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。 -
-

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

-
+## 公式定義 -

形式文法

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

例

+## 例 + +### 10 回実行されるアニメーション + +#### HTML + +```html +
+``` + +#### CSS + +```css +.box { + background-color: rebeccapurple; + border-radius: 10px; + width: 100px; + height: 100px; + animation-name: rotate; + animation-duration: 0.7s; + animation-iteration-count: 10; +} + +@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)を参照してください。 - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }}初回定義
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

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

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

+{{Compat}} -

関連情報

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