← 返回首页

KeyframeEffect: setKeyframes() メソッド - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

KeyframeEffect: setKeyframes() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.

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

In this article

構文

js

setKeyframes(keyframes)

引数

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

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

返値

なし (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",
});

仕様書

Specification

Web Animations
# dom-keyframeeffect-setkeyframes

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2026年1月4日 by MDN contributors.

View this page on GitHub • Report a problem with this content

ウェブアニメーション API
KeyframeEffect
コンストラクター
1. KeyframeEffect()
インスタンスプロパティ
インスタンスメソッド
1. getKeyframes()
2. setKeyframes()
継承
1. AnimationEffect
Web Animations に関連するページ
ガイド
1. ウェブアニメーション API の使用
2. ウェブアニメーション API の概念
3. キーフレームの形式
4. CSS アニメーションのヒントとコツ