このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

KeyframeEffect: setKeyframes() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。

setKeyframes()KeyframeEffect インターフェイスのメソッドで、影響する KeyframeEffect を構成するキーフレームを、新しいキーフレームのセットに設定して置き換えます。

構文

js
setKeyframes(keyframes)

引数

keyframes

キーフレームオブジェクトまたは nullnull に設定した場合、キーフレームは空のキーフレームの並びに置き換えます。

キーフレームオブジェクトの形式の詳細情報はリンク先を参照してください。

返値

なし (undefined)。

例外

例外 説明
TypeError 1 つ以上のフレームが正しいオブジェクト型でなかったか、キーフレームがオフセット順に緩やかに並べ替えられていなかったか、オフセットに 0 未満または 1 を超えるキーフレームが存在していた場合。

メモ: キーフレームが処理できない場合、または不正な形式である場合、KeyframeEffectのキーフレームは変更されません。

js
// キーフレームオブジェクトの配列を渡す
existingKeyframeEffect.setKeyframes([
  { color: "blue" },
  { color: "green", left: "10px" },
]);

// 値の配列をオブジェクトで渡す
existingKeyframeEffect.setKeyframes({
  color: ["blue", "green"],
  left: ["0", "10px"],
});

// 単一メンバーのオブジェクトを渡す
existingKeyframeEffect.setKeyframes({
  color: "blue",
});

仕様書

仕様書
Web Animations
# dom-keyframeeffect-setkeyframes

ブラウザーの互換性

関連情報