← 返回首页

KeyframeEffect - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

KeyframeEffect

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

KeyframeEffect はウェブアニメーション API のインターフェイスで、キーフレームと呼ばれるアニメーション可能なプロパティと値のセットを作成することができます。これらは Animation() コンストラクターを使用して再生できます。

AnimationEffect KeyframeEffect

In this article

コンストラクター

KeyframeEffect()

新しいKeyframeEffectオブジェクトインスタンスを返し、また既存のキーフレーム効果オブジェクトのインスタンスの複製もすることができます。

インスタンスプロパティ

KeyframeEffect.target

このオブジェクトによってアニメーション処理される要素、または擬似要素の親要素を取得または設定します。特定の要素や擬似要素を対象としないアニメーションの場合、 null となることがあります。

KeyframeEffect.pseudoElement

このオブジェクトによってアニメーションされる擬似要素のセレクターを取得または設定します。擬似要素を対象としないアニメーションの場合、null となる可能性があります。

KeyframeEffect.iterationComposite

このキーフレーム効果のプロパティ値変更を解決するための反復合成操作を取得または設定します。

KeyframeEffect.composite

このキーフレーム効果と他のキーフレーム効果との間でプロパティ値の変更を解決するための合成演算を取得または設定します。

インスタンスメソッド

このインターフェイスは、親である AnimationEffect から一部のメソッドを継承しています。

AnimationEffect.getComputedTiming()

このキーフレーム効果の計算された現在の時点の値を返します。

KeyframeEffect.getKeyframes()

この効果を構成する計算済みキーフレームと、その計算済みキーフレームオフセットをつけて返します。

AnimationEffect.getTiming()

アニメーションに関連付けられたオブジェクトを返します。このオブジェクトには、アニメーションのすべてのタイミング値が含まれています。

KeyframeEffect.setKeyframes()

この効果を構成するキーフレームの設定する設定を置き換えます。

AnimationEffect.updateTiming()

指定したタイミングプロパティを更新します。

例

次の例では、KeyframeEffect コンストラクターを使用して、床を転がるロフル絵文字の動きを定義する一連のキーフレームを作成し、その設定を行います。

js
const emoji = document.querySelector("div"); // アニメーションする要素

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // キーフレーム
    { transform: "translateX(200px) rotate(1.3turn)" }, // キーフレーム
  ],
  {
    // キーフレームオプション
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);

// ロフルアニメーションを再生
rollingAnimation.play();

html

<div>🤣</div>

body {
  box-shadow: 0 5px 5px pink;
}

div {
  width: fit-content;
  margin-left: calc(50% - 132px);
  font-size: 64px;
  user-select: none;
  margin-top: 1rem;
}

仕様書

Specification

Web Animations
# the-keyframeeffect-interface

ブラウザーの互換性

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 アニメーションのヒントとコツ