From e36b4c015f550f035898df5f028e1d4a7b1cdce0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jan 2022 02:46:32 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-play-state/index.md | 115 ++++++++++++++----------- 1 file changed, 65 insertions(+), 50 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/animation-play-state/index.md b/files/ja/web/css/animation-play-state/index.md index ed4d05392a..42609a96ed 100644 --- a/files/ja/web/css/animation-play-state/index.md +++ b/files/ja/web/css/animation-play-state/index.md @@ -5,22 +5,21 @@ tags: - CSS - CSS アニメーション - CSS プロパティ - - Reference + - リファレンス translation_of: Web/CSS/animation-play-state --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`animation-play-state`** は [CSS](/ja/docs/Web/CSS) のプロパティで、アニメーションが実行中か停止中かを設定します。 -
{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}
+{{EmbedInteractiveExample("pages/css/animation-play-state.html")}} - +停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。 -

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

+## 構文 -

構文

- -
/* 単一のアニメーション */
+```css
+/* 単一のアニメーション */
 animation-play-state: running;
 animation-play-state: paused;
 
@@ -30,59 +29,75 @@ animation-play-state: paused, running, running;
 /* グローバル値 */
 animation-play-state: inherit;
 animation-play-state: initial;
+animation-play-state: revert;
 animation-play-state: unset;
-
+``` + +### 値 + +- `running` + - : **アニメーション**が現在**実行中**です。 +- `paused` + - : **アニメーション**が現在**停止中**です。 + +> **Note:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 停止中のアニメーション -

値

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

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

-
+#### CSS -

形式文法

+```css +.box { + background-color: rebeccapurple; + border-radius: 10px; + width: 100px; + height: 100px; + animation-name: rotate; + animation-duration: 0.7s; + animation-play-state: paused; +} -
{{csssyntax}}
-
+@keyframes rotate { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} +``` -

{{cssinfo}}

+#### 結果 -

例

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

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

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

仕様書

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

ブラウザーの対応

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

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

+{{Compat}} -

関連情報

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