このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
KeyframeEffect: setKeyframes() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。
setKeyframes() は KeyframeEffect インターフェイスのメソッドで、影響する KeyframeEffect を構成するキーフレームを、新しいキーフレームのセットに設定して置き換えます。
構文
js
setKeyframes(keyframes)
引数
返値
なし (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 |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。