recursal/MDN huggingface dataset:
XRRigidTransform.inverse
========================

`XRRigidTransform` インターフェイスの **`inverse`** 読み取り専用プロパティは、それ自体の変換の逆である別の `XRRigidTransform` オブジェクトを返します。 つまり、逆を明示的に生成する代わりに、`inverse` プロパティを使用して、`XRRigidTransform` の逆をいつでも取得できます。

構文
--
```

let transformInverse = xrRigidTransform.inverse;
```

### 値

アクセスした `XRRigidTransform` の逆を含む `XRRigidTransform`。

親 `XRRigidTransform` によって以前に変換されたオブジェクトに変換の逆を適用すると、常に変換が元に戻され、結果としてオブジェクトは前のポーズに戻ります。 つまり、その位置と向きの両方が以前の構成に戻ります。

例
-

この例では、オブジェクトのモデルビュー行列は、ビュー行列を取得し、それをオブジェクトのポーズ行列で乗算することによって計算されます。


```js
let modelViewMatrix = mat4.create();

for (let view of pose.view) {
  let viewport = glLayer.getViewport(view);
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  /\* ... \*/

  mat4.multiply(modelViewMatrix, view.transform.inverse.matrix, objectMatrix);
  gl.uniformMatrix4fv(
    programInfo.uniformLocations.modelViewMatrix,
    false,
    modelViewMatrix,
  );

  /\* ... \*/
}
```


このレンダラーのコアコードのあらましは、ビューアーの位置と向きに基づいてオブジェクトを変換するために使用するモデルビュー行列として、その変換の逆の行列をを取ることによって、ポーズのビューがどのように表されるかを示しています。 逆の行列にオブジェクトの行列を掛けてモデルビュー行列を取得し、その情報を含むようにユニフォームを設定することで、シェーダープログラムに渡します。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrrigidtransform-inverse |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRRigidTransform.position
=========================

`XRRigidTransform` の **`position`** 読み取り専用プロパティは、変換の平行移動成分を記述する、メートルで指定された 3D 点を提供する `DOMPointReadOnly` オブジェクトです。

構文
--
```

let pos = xrRigidTransform.position;
```

### 値

変換行列の 3D 位置成分を示す読み取り専用の `DOMPointReadOnly`。 単位はメートルです。

**メモ:** 点の `w` 成分は常に 1.0 です。

例
-

オブジェクトを目の高さに配置するために使用できる参照空間を作成するには、次のようにします（目の高さが 1.5 メートルであると想定）。


```js
function onSessionStarted(xrSession) {
  xrSession.addEventListener("end", onSessionEnded);

  gl = initGraphics(xrSession);

  let glLayer = new XRWebGLLayer(xrSession, gl);
  xrSession.updateRenderState({ baseLayer: glLayer });

  if (immersiveSession) {
    xrSession.requestReferenceSpace("bounded-floor").then((refSpace) => {
      refSpaceCreated(refSpace);
    }).catch(() => {
      session.requestReferenceSpace("local-floor").then(refSpaceCreated);
    });
  } else {
    session.requestReferenceSpace("viewer").then(refSpaceCreated);
  }
}

function refSpaceCreated(refSpace) {
  if (immersiveSession) {
    xrReferenceSpace = refSpace;
  } else {
    xrReferenceSpace = refSpace.getOffsetReferenceSpace(
      new XRRigidTransform({y: -1.5});
    );
  }
  xrSession.requestAnimationFrame(onFrame);
}
```


WebXR で使用するグラフィックスコンテキストを設定した後、これは変数 `immersiveSession` が `true` であるかどうかを確認することから始まります。 その場合、最初に `bounded-floor` 参照空間を要求します。 それが失敗した場合（おそらく `bounded-floor` がサポートされていないため）、`local-floor` 参照空間を要求しようとします。

没入型セッションでない場合は、代わりに `viewer` 参照空間を要求します。

いずれの場合も、空間が取得されたら、`refSpaceCreated()` 関数に渡します。 没入型空間の場合、指定された空間は将来の使用のために単に保存します。 ただし、インラインセッションの場合、床レベルが自動的に調整されない空間にいることがわかっているので、オフセット参照空間を要求して、ビューアーの高さを推定床レベルの 0 メートルより 1.5 メートル上にシフトします。 その新しい参照空間は、最初に受け取ったものの代わりに使用します。

最後に、アニメーションフレームの要求が送信されます。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrrigidtransform-position |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRRigidTransform()
==================

**`XRRigidTransform()`** コンストラクターは、点またはオブジェクトの位置と向きを表す新しい `XRRigidTransform` オブジェクトを作成して返します。 特に、`XRRigidTransform` は、空間を横断する座標系間で平行移動するための変換を提供するときに使用されます。

構文
--
```

let xrRigidTransform = new XRRigidTransform(position, orientation);
```

### パラメーター

`position` 省略可

点またはオブジェクトが配置される座標を指定する `DOMPointInit` (en-US) に準拠するオブジェクト。 これらの寸法はメートルで指定します。 このパラメーターが省略されているか、`DOMPointInit` と互換性がない場合、使用される位置は `{x: 0, y: 0, z: 0, w: 1}` であると見なされます。 `w` は*常に* 1 でなければなりません。

`orientation` 省略可

オブジェクトが向いている方向を指定する `DOMPointInit` (en-US) に準拠するオブジェクト。 向きのデフォルト値は `{x: 0, y: 0, z: 0, w: 1}` です。 指定された向きは、まだ正規化されていない場合は正規化されます。

### 戻り値

オブジェクトの位置と向きを原点から指定された `position` に調整し、`orientation` によって示される方向を向く変換行列を表すように初期化された新しい `XRRigidTransform` オブジェクト。

### 例外

`TypeError`

指定された `position` の `w` 座標の値が 1.0 ではありません。

例
-

この例では、シーンのアニメーションの開始が示されています。 特定のタイプの参照空間の要求から始まり、最初のアニメーションフレームを要求する前に、変換に基づいて座標系をシフトします。


```js
let animationFrameRequestID = 0;

xrSession.requestReferenceSpace("local-floor").then((refSpace) => {
  xrReferenceSpace = refSpace.getOffsetReferenceSpace(
    new XRRigidTransform(viewerPosition, viewerOrientation),
  );
  animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);
});
```


`local-floor` タイプの参照空間を要求した後、返された promise は最終的に解決され、その時点で新しい参照空間オブジェクト `refSpace` を受け取ります。 ビューアーの初期位置と向きから `XRRigidTransform` を作成した後、新しい変換を `getOffsetReferenceSpace()` に渡して*別*の参照空間を作成します。 オフセットして、その原点が `viewerPosition` によって指定された座標と同じ空間内の場所に配置されるようにします。 向きも同様に修正されます。

次に、`requestAnimationFrame()` (en-US) が呼び出され、描画する新しいアニメーションフレームを要求します。 `drawFrame()` コールバックは、システムが次のフレームを描画する準備ができたときに実行されます。

移動、向き、モーションには、さらに多くの例があります。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrrigidtransform-xrrigidtransform |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRRigidTransform.orientation
============================

`XRRigidTransform` の **`orientation`** 読み取り専用プロパティは、オブジェクトによって表される変換の回転成分を指定する正規化されたクォータニオン（**単位クォータニオン**または**ベルソル**とも呼ばれます）を含む `DOMPointReadOnly` です。 長さが正確に 1.0 メートルではないクォータニオンを指定すると、正規化されます。

構文
--
```

let orientation = xrRigidTransform.orientation;
```

### 値

変換の向き成分を提供する単位クォータニオンを含む `DOMPointReadOnly` オブジェクト。 単位クォータニオンとして、返されるクォータニオンの長さは常に 1.0 メートルです。

例
-

地面から 2 メートル離れた位置に、真上を向くように配置された参照空間を作成するには、次のようにします。


```js
xrReferenceSpace = refSpace.getOffsetReferenceSpace(
  new XRRigidTransform({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0});
);
```


ここで指定されている単位クォータニオンは [0.0, 1.0, 0.0, 1.0] であり、オブジェクトが y 軸に沿って直接向いている必要があることを示します。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrrigidtransform-orientation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 移動、向き、モーション
* 単位クォータニオン
* クォータニオンと空間回転（英語）
CSSLayerBlockRule: name プロパティ
=============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`name`** は `CSSLayerBlockRule` インターフェイスの読み取り専用プロパティで、カスケードレイヤーに関連付けられた名前を表します。

値
-

レイヤーの名前の入った文字列です。レイヤーが無名の場合は `""` です。

例
-

### HTML


```html
<output></output> <output></output>
```

### CSS


```css
output {
  display: block;
}

@layer special {
  div {
    color: rebeccapurple;
  }
}

@layer {
  div {
    color: black;
  }
}
```

### JavaScript


```js
const item1 = document.getElementsByTagName("output")[0];
const item2 = document.getElementsByTagName("output")[1];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。

const layer = rules[1]; // CSSLayerBlockRule
const anonymous = rules[2]; // 無名の CSSLayerBlockRule

item1.textContent = `1 つ目の CSSLayerBlockRule は "${layer.name}" レイヤーを定義しています。`;
item2.textContent = `2 つ目の CSSLayerBlockRule は "${anonymous.name}" という名前のレイヤーです。`;
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # dom-csslayerblockrule-name |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `@layer` の宣言文は `CSSLayerStatementRule` で表されます。
* CSS における名前付きカスケードレイヤーの作成方法
Animation: id プロパティ
===================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.id`** は ウェブアニメーション API のプロパティで、このアニメーションを識別する文字列を返したり設定したりします。

値
-

アニメーションを識別するために使用することができる文字列、またはアニメーションに `id` がない場合は `null` です。

例
-

以下の White Rabbit の例では、 `rabbitDownAnimation` の `id` に割り当てています。


```js
rabbitDownAnimation.id = "rabbitGo";
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-id |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `KeyframeEffect` (en-US)
* ウェブアニメーション API
* `Animation`
Animation: finished プロパティ
=========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.finished`** は ウェブアニメーション API の読み取り専用プロパティで、アニメーションの再生が完了すると解決される `Promise` を返します。

**メモ:** アニメーションが `finished` の再生状態から離れる時点（つまり、再び再生を始める時点）ごとに、このプロパティに対して新しい `Promise` が作成されます。新しい `Promise` は新しいアニメーションシーケンスが完了すると解決されます。

値
-

アニメーションの実行が完了すると解決される `Promise` オブジェクト。

例
-

以下のコードは、要素 `elem` で実行するアニメーションがすべて完了するまで待ち、その要素を DOM ツリーから削除します。


```js
Promise.all(elem.getAnimations().map((animation) => animation.finished)).then(
  () => elem.remove(),
);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-finished |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `KeyframeEffect` (en-US)
* ウェブアニメーション API
* `Animation`
Animation: reverse() メソッド
=========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.reverse()`** は `Animation` インターフェイスのメソッドで、再生方向を逆にします。つまり、アニメーションはその先頭で終わります。再生されていないアニメーションで呼び出されると、アニメーション全体が逆再生されます。一時停止しているアニメーションで呼び出されると、アニメーションは逆に続けられます。

構文
--


```js
reverse()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、ボトルをクリックまたはタップすると、アリスの成長アニメーション (`aliceChange`) が逆再生され、アリスが小さくなります。これは `aliceChange` の `Animation.playbackRate` を `-1` に設定することで行います。


```js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.playbackRate = -1;
  aliceChange.play();

  // play the bottle's animation
  drinking.play();
};
```


But it could also have been done by calling `reverse()` on `aliceChange` like so:


```js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.reverse();

  // play the bottle's animation
  drinking.play();
};
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-reverse |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.pause()`: アニメーションを停止します。
* `Animation.play()`: アニメーションを正方向に再生します。
Animation: commitStyles() メソッド
==============================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`commitStyles()` はウェブアニメーション API の `Animation` インターフェイスのメソッドで、アニメーションの現在のスタイルの計算値をターゲット要素の `style` に書き込みます。 `commitStyles()` はアニメーションが自動削除されていてもうまく動作します。

`commitStyles()` は `fill` と組み合わせて使用することができ、アニメーションが終わった後も最終的な状態を維持させることができます。同じ効果は `fill` だけでも得られますが、無期限に満たすアニメーションを使用することは推奨されません。アニメーションはすべての静的スタイルよりも優先されますので、無期限の塗りつぶしアニメーションは対象とする要素が通常のスタイル設定をされることを妨げる可能性があります。

`commitStyles()` を使用することができます スタイル設定は要素の `style` 属性に書き込まれます。

構文
--


```js
commitStyles()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

### アニメーションの最後の状態を確定

この例では、"Commit styles" と "Fill forwards" とラベル付けされた2つのボタンがあります。どちらのボタンもクリックするとアニメーションし、アニメーションの最終状態を維持します。

しかし、異なる点は、 "Fill forwards" は `fill: "forwards"` これは、ブラウザーがアニメーションの状態を無期限に、あるいは自動的に除去されるまで維持しなければならないことを意味しています。

しかし、 "Commit styles" ボタンはアニメーションが終了するのを待ち、 `commitStyles()` を呼び出されてからアニメーションを取り消しますので、完了したスタイルはアニメーションの状態ではなく `style` 属性の値として取り込まれます。

#### HTML


```html
<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>
```


```
button {
  margin: 0.5rem;
}
```


#### JavaScript


```js
const commitStyles = document.querySelector(".commit-styles");
let offset1 = 0;

commitStyles.addEventListener("click", async (event) => {
  // Start the animation
  offset1 = 100 - offset1;
  const animation = commitStyles.animate(
    { transform: `translate(${offset1}px)` },
    { duration: 500, fill: "forwards" },
  );

  // Wait for the animation to finish
  await animation.finished;
  // Commit animation state to style attribute
  animation.commitStyles();
  // Cancel the animation
  animation.cancel();
});

const fillForwards = document.querySelector(".fill-forwards");
let offset2 = 0;

fillForwards.addEventListener("click", async (event) => {
  // Start the animation
  offset2 = 100 - offset2;
  const animation = fillForwards.animate(
    { transform: `translate(${offset2}px)` },
    { duration: 500, fill: "forwards" },
  );
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-commitstyles |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
Animation: Animation() コンストラクター
===============================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation()`** はウェブアニメーション API のコンストラクターで、新しい `Animation` オブジェクトのインスタンスを返します。

構文
--


```js
new Animation()
new Animation(effect)
new Animation(effect, timeline)
```

### 引数

`effect` 省略可

アニメーションに割り当てる、 `AnimationEffect` インターフェイスに基づくオブジェクトとして対象となる効果です。将来的には `SequenceEffect` や `GroupEffect` などの他の効果も利用できるようになるかもしれませんが、現在のところ利用できる効果は `KeyframeEffect` (en-US) だけです。これは `null` （これが既定値です）にすると、効果を適用しないことを示します。

`timeline` 省略可

アニメーションを関連付ける `timeline` を指定します。 `AnimationTimeline` (en-US) インターフェイスに基づく型のオブジェクトを指定します。現在利用できるタイムラインは `DocumentTimeline` (en-US) だけですが、将来的にはジェスチャーやスクロールに関連するタイムラインも利用できるようになるかもしれません。既定値は `Document.timeline` ですが、`null` に設定することも可能です。

例
-

「白兎を追え」の例では、 `Animation()` コンストラクターを使用して `Animation` を `rabbitDownKeyframes` に対して、文書の `timeline` を使用して生成しています。


```js
const rabbitDownAnimation = new Animation(
  rabbitDownKeyframes,
  document.timeline,
);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-animation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* `Animation`
Animation: effect プロパティ
=======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.effect`** は ウェブアニメーション API のプロパティで、アニメーションの対象とする効果を取得したり設定したりします。対象とする効果は `AnimationEffect` に基づくタイプの効果オブジェクト、例えば `KeyframeEffect` (en-US)、または `null` です。

値
-

アニメーションの対象とするアニメーション効果を示す `AnimationEffect` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-effect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* `AnimationEffect`
* `Animation`
Animation: finish() メソッド
========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`finish()`** くち ウェブアニメーション API の `Animation` インターフェイスのメソッドで、現在の再生時刻を現在の再生方向に対応するアニメーションの末尾に設定します。

つまり、アニメーションが順方向に再生されている場合は、再生時刻をアニメーションシーケンスの長さに設定し、アニメーションが逆方向に再生されている（`reverse()` メソッドが呼び出されている）場合は、再生時刻を 0 に設定します。

構文
--


```js
finish()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`InvalidState`

プレーヤーの再生レートが 0 であるか、アニメーションの再生レートが 0 より大きく、アニメーションの終了時刻が無限大である場合。

例
-

次の例では、 `finish()` メソッドを使用して `InvalidState` エラーを捕捉する方法を示します。


```js
interfaceElement.addEventListener("mousedown", () => {
  try {
    player.finish();
  } catch (e) {
    if (e instanceof InvalidState) {
      console.log("finish() called on paused or finished animation.");
    } else {
      logMyErrors(e); //pass exception object to error handler
    }
  }
});
```


次の例では、再生方向に関係なく、単一の要素のアニメーションをすべて完了させています。


```js
elem.getAnimations().forEach((animation) => animation.finish());
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-finish |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.play()`: アニメーションを正方向に再生します
* `Animation.reverse()`: アニメーションを逆方向に再生します
Animation: updatePlaybackRate() メソッド
====================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`updatePlaybackRate()`** はウェブアニメーション API の `Animation` インターフェイスのメソッドで、最初に再生位置を同期させた後に、アニメーションの速度を設定します。

場合によっては、アニメーションが別個のスレッドやプロセスで実行され、長時間実行される JavaScript がメインスレッドを遅延させている間も更新を続けることがあります。このような場合、アニメーションに `playbackRate` を直接設定すると、メインスレッドでの再生位置が現在動作している再生位置からずれることがあるため、アニメーションの再生位置がジャンプすることが発生する可能性があります。

`updatePlaybackRate()` は非同期メソッドで、アニメーションの現在の再生位置と同期した後に速度を設定します。 `updatePlaybackRate()` を呼び出した後、アニメーションの `playbackRate` はすぐには更新されません。アニメーションの `ready` プロミスが解決された時点で更新されます。

構文
--


```js
updatePlaybackRate(playbackRate)
```

### 引数

`playbackRate`

設定する新しい速度。正の値（アニメーションを速くしたり遅くしたりする）、負の値（逆再生する）、またはゼロ（アニメーションを効果的に一時停止する）です。

### 返値

なし (`undefined`)。

例
-

スピードセレクターコンポーネントは、下記のように `updatePlaybackRate()` のスムーズな更新が良いでしょう。


```js
speedSelector.addEventListener("input", (evt) => {
  cartoon.updatePlaybackRate(parseFloat(evt.target.value));
  cartoon.ready.then(() => {
    console.log(`Playback rate set to ${cartoon.playbackRate}`);
  });
});
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-updateplaybackrate |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* `Animation.playbackRate` — 現在の再生レートを読み出すか、同期的に設定します。
* `Animation.reverse()` — 再生レートを反転させ、必要に応じて再生を再開します。
* `Animation` — ウェブページのアニメーションを制御するために使用することができる他のメソッドやプロパティがあります。
Animation: pause() メソッド
=======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`pause()`** はウェブアニメーション API の`Animation` インターフェイスのメソッドで、アニメーションの再生を一時停止します。

構文
--


```js
animation.pause();
```

### 引数

なし。

### 返値

なし。

### 例外

`InvalidStateError` `DOMException`

アニメーションの `currentTime` が `unresolved` であり（おそらくまだ再生を始めていない）、アニメーションの終了時刻が正の値である場合に発生します。

例
-

`Animation.pause()` はウェブアニメーション API の国のアリスのGrowing/Shrinking Alice Gameで何度も使用しています。 `Element.animate()` メソッドで作成したアニメーションはすぐに再生を始めるので、それを避けたい場合は手動で一時停止しなければならないのが主な理由です。


```js
// animation of the cupcake slowly getting eaten up
const nommingCake = document
  .getElementById("eat-me\_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// doesn't actually need to be eaten until a click event, so pause it initially:
nommingCake.pause();
```


Additionally, when resetting:


```js
// An all-purpose function to pause the animations on Alice, the cupcake, and the bottle that reads "drink me."
const stopPlayingAlice = () => {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

// When the user releases the cupcake or the bottle, pause the animations.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-pause |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.pause()`: アニメーションを停止します。
* `Animation.reverse()`: アニメーションを逆方向に再生します。
* `Animation.finish()`: アニメーションを終了します。
* `Animation.cancel()`: アニメーションをキャンセルします。
Animation: cancel() メソッド
========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
ウェブアニメーション API の **`cancel()`** は `Animation` インターフェイスのメソッドで、このアニメーションによって引き起こされたすべての `KeyframeEffect` (en-US)を初期化し、再生を中止します。

**メモ:** アニメ―ションをキャンセルした時、`startTime` と `currentTime` は、 `null` に設定されます。

構文
--


```js
cancel()
```

### 引数

なし。

### 返値

なし。

### 例外

このメソッドは、直接は例外を発生しません。しかし、キャンセル時にアニメーションの `playState` が `"idle"` 以外の場合、 current finished promise は `DOMException` の `AbortError` で拒否されます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-cancel |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブアニメーション API
* `KeyframeEffect` (en-US)
* `Animation`
* `Animation.playState`
* `Animation.finished` はこのアニメーションの `playState` が `"idle"` でなくなると拒否されるこの操作のプロミスを返します。