2021/11/19 時点の英語版に基づき新規翻訳

5 files changed, 316 insertions, 0 deletions

diff --git a/files/ja/web/api/csskeyframesrule/appendrule/index.md b/files/ja/web/api/csskeyframesrule/appendrule/index.md
new file mode 100644
index 0000000000..190ca3038a
--- /dev/null
+++ b/files/ja/web/api/csskeyframesrule/appendrule/index.md
@@ -0,0 +1,61 @@
+---
+title: CSSKeyframesRule.appendRule()
+slug: Web/API/CSSKeyframesRule/appendRule
+tags:
+  - API
+  - CSSOM
+  - CSSKeyframesRule
+  - CSS アニメーション
+  - メソッド
+  - リファレンス
+browser-compat: api.CSSKeyframesRule.appendRule
+translation_of: Web/API/CSSKeyframesRule/appendRule
+---
+{{APIRef("CSSOM") }}
+
+**`appendRule()`** は {{domxref("CSSKeyframeRule")}} インターフェイスのメソッドで、 {{domxref("CSSKeyFrameRule")}} をルールの末尾に追加します。
+
+## 構文
+
+```js
+CSSKeyframesRule.appendRule(rule);
+```
+
+### 引数
+
+- `rule`
+  - : keyframe ルールを含む {{domxref("CSSOMString")}} です。
+
+### 返値
+
+なし。
+
+## 例
+
+この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。
+`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクトを返します。その `cssRules` プロパティは 1 つのルールの入った {{domxref("CSSRuleList")}} を返します。
+
+`appendRule` でもう一つのルールを追加すると、 `cssRules` プロパティは 2 つのルールが入った {{domxref("CSSRuleList")}} を返します。
+
+```css
+@keyframes slidein {
+  from {
+    transform: translateX(0%);
+  }
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+let keyframes = myRules[0]; // a CSSKeyframesRule
+keyframes.appendRule('to {transform: translateX(100%);}');
+console.log(keyframes.cssRules); // 2 つのルールが入った CSSRuleList オブジェクト
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/csskeyframesrule/cssrules/index.md b/files/ja/web/api/csskeyframesrule/cssrules/index.md
new file mode 100644
index 0000000000..c4b81f93bb
--- /dev/null
+++ b/files/ja/web/api/csskeyframesrule/cssrules/index.md
@@ -0,0 +1,57 @@
+---
+title: CSSKeyframesRule.cssRules
+slug: Web/API/CSSKeyframesRule/cssRules
+tags:
+  - API
+  - CSSOM
+  - CSSKeyframesRule
+  - CSS アニメーション
+  - プロパティ
+  - リファレンス
+browser-compat: api.CSSKeyframesRule.cssRules
+translation_of: Web/API/CSSKeyframesRule/cssRules
+---
+{{APIRef("CSSOM") }}
+
+**`cssRules`** は {{domxref("CSSKeyframeRule")}} インターフェイスの読み取り専用プロパティで、 {{domxref("CSSRuleList")}} で keyframes {{cssxref("at-rule", "アットルール")}}のルールを返します。
+
+## 構文
+
+```js
+var cssRules = CSSKeyframesRule.cssRules;
+```
+
+### 値
+
+{{domxref('CSSRuleList')}} です。
+
+## 例
+
+この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。
+`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクトを返します。 `cssRules` プロパティは 2 つのルールを含む {{domxref("CSSRuleList")}} を返します。
+
+```css
+@keyframes slidein {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+let keyframes = myRules[0]; // CSSKeyframesRule
+console.log(keyframes.cssRules); // 2 つのルールを含む CSSRuleList オブジェクト
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/csskeyframesrule/deleterule/index.md b/files/ja/web/api/csskeyframesrule/deleterule/index.md
new file mode 100644
index 0000000000..893e7cb828
--- /dev/null
+++ b/files/ja/web/api/csskeyframesrule/deleterule/index.md
@@ -0,0 +1,72 @@
+---
+title: CSSKeyframesRule.deleteRule()
+slug: Web/API/CSSKeyframesRule/deleteRule
+tags:
+  - API
+  - CSSOM
+  - CSSKeyframesRule
+  - CSS アニメーション
+  - メソッド
+  - リファレンス
+browser-compat: api.CSSKeyframesRule.deleteRule
+translation_of: Web/API/CSSKeyframesRule/deleteRule
+---
+{{APIRef("CSSOM") }}
+
+**`deleteRule()`** は {{domxref("CSSKeyframeRule")}} インターフェイスのメソッドで、指定されたキーフレームセレクターに一致する {{domxref("CSSKeyFrameRule")}} を削除します。
+
+## 構文
+
+```js
+CSSKeyframesRule.deleteRule(select);
+```
+
+### 引数
+
+- `select`
+
+  - : {{domxref("CSSOMString")}} で、削除するルールのキーフレームセレクターを指定します。次のうちのいずれかを指令します。
+
+    - 0% から 100% までのパーセント値をカンマで区切ったリスト
+    - または `from` か `to` のキーワード
+
+    なお、指定するキーフレームセレクターの値の数と順序は、対象となるキーフレームルールのものと一致していなければなりません。ホワイトスペースは無視されます。
+
+### 返値
+
+None.
+
+## 例
+
+この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。
+`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクトを返します。 `cssRules` プロパティは
+ 2 つのルールを持った {{domxref("CSSRuleList")}} を返します。
+
+`deleteRule()` でルールを 1 つ削除した後は、 `cssRules` プロパティはルールを 1 つ持った {{domxref("CSSRuleList")}} を返します。
+
+```css
+@keyframes slidein {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+let keyframes = myRules[0]; // CSSKeyframesRule
+keyframes.deleteRule('to');
+console.log(keyframes.cssRules); // 1 つのルールを持った CSSRuleList を返す
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/csskeyframesrule/findrule/index.md b/files/ja/web/api/csskeyframesrule/findrule/index.md
new file mode 100644
index 0000000000..8f6e478484
--- /dev/null
+++ b/files/ja/web/api/csskeyframesrule/findrule/index.md
@@ -0,0 +1,68 @@
+---
+title: CSSKeyframesRule.findRule()
+slug: Web/API/CSSKeyframesRule/findRule
+tags:
+  - API
+  - CSSOM
+  - CSSKeyframesRule
+  - CSS アニメーション
+  - メソッド
+  - リファレンス
+browser-compat: api.CSSKeyframesRule.findRule
+translation_of: Web/API/CSSKeyframesRule/findRule
+---
+{{APIRef("CSSOM") }}
+
+**`findRule()`** は {{domxref("CSSKeyframeRule")}} インターフェイスのメソッドで、して市荒れたキーフレームセレクターに一致する {{domxref("CSSKeyFrameRule")}} を検索します。
+
+## 構文
+
+```js
+CSSKeyframesRule.findRule(select);
+```
+
+### 引数
+
+- `select`
+
+  - : {{domxref("CSSOMString")}} で、見つけるルールのキーフレームセレクターを指定します。次のどちらかになります。
+
+    - 0% から 100% までのパーセント値をカンマで区切ったリスト
+    - または `from` か `to` のキーワード
+
+    なお、指定するキーフレームセレクターの値の数と順序は、対象となるキーフレームルールのものと一致していなければなりません。ホワイトスペースは無視されます。
+
+### 返値
+
+最後にルールに一致した {{domxref("CSSKeyframeRule")}} を返します。ルールが見つからなかった場合は、何も返されません。
+
+## 例
+
+この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。
+`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクト 1 つを返します。 findRule("to") を呼び出すと、 2 番目のルールを表す {{domxref("CSSKeyframeRule")}} が返されます。
+
+```css
+@keyframes slidein {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+let keyframes = myRules[0]; // CSSKeyframesRule
+console.log(keyframes.findRule('to'));  // CSSKeyframeRule オブジェクト
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/csskeyframesrule/name/index.md b/files/ja/web/api/csskeyframesrule/name/index.md
new file mode 100644
index 0000000000..dae3fa694b
--- /dev/null
+++ b/files/ja/web/api/csskeyframesrule/name/index.md
@@ -0,0 +1,58 @@
+---
+title: CSSKeyframesRule.name
+slug: Web/API/CSSKeyframesRule/name
+tags:
+  - API
+  - CSSOM
+  - CSSKeyframesRule
+  - CSS アニメーション
+  - プロパティ
+  - リファレンス
+browser-compat: api.CSSKeyframesRule.name
+translation_of: Web/API/CSSKeyframesRule/name
+---
+{{APIRef("CSSOM") }}
+
+**`name`** は {{domxref("CSSKeyframeRule")}} インターフェイスのプロパティで、 {{cssxref("animation-name")}} プロパティで使用されるアニメーションの名前を取得したり設定したりします。
+
+## 構文
+
+```js
+var name = CSSKeyframesRule.name;
+CSSKeyframesRule.name = name;
+```
+
+### 値
+
+{{domxref('CSSOMString')}} です。
+
+## 例
+
+この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。
+`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクトを返し、 `name` は "slidein" に設定されます。
+
+```css
+@keyframes slidein {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+```
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+let keyframes = myRules[0]; // CSSKeyframesRule
+console.log(keyframes.name); // "slidein"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}