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() コンストラクターを使用して再生できます。

コンストラクター

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

インスタンスプロパティ

KeyframeEffect.target: このオブジェクトによってアニメーション処理される要素、または擬似要素の親要素を取得または設定します。特定の要素や擬似要素を対象としないアニメーションの場合、 null となることがあります。
KeyframeEffect.pseudoElement: このオブジェクトによってアニメーションされる擬似要素のセレクターを取得または設定します。擬似要素を対象としないアニメーションの場合、null となる可能性があります。
KeyframeEffect.iterationComposite: このキーフレーム効果のプロパティ値変更を解決するための反復合成操作を取得または設定します。
KeyframeEffect.composite: このキーフレーム効果と他のキーフレーム効果との間でプロパティ値の変更を解決するための合成演算を取得または設定します。

インスタンスメソッド

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

AnimationEffect.getComputedTiming(): このキーフレーム効果の計算された現在の時点の値を返します。
KeyframeEffect.getKeyframes(): この効果を構成する計算済みキーフレームと、その計算済みキーフレームオフセットをつけて返します。
AnimationEffect.getTiming(): アニメーションに関連付けられたオブジェクトを返します。このオブジェクトには、アニメーションのすべてのタイミング値が含まれています。
KeyframeEffect.setKeyframes(): この効果を構成するキーフレームの設定する設定を置き換えます。
AnimationEffect.updateTiming(): 指定したタイミングプロパティを更新します。

例

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

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;
}