Animation: Animation() コンストラクター

Baseline

広く利用可能

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

完全な互換性情報を見る
もっと詳しく

Animation() はウェブアニメーション API のコンストラクターで、新しい Animation オブジェクトのインスタンスを返します。

構文

new Animation()
new Animation(effect)
new Animation(effect, timeline)

引数

effect 省略可: アニメーションに割り当てる、 AnimationEffect インターフェイスに基づくオブジェクトとして対象となる効果です。将来的には SequenceEffect や GroupEffect などの他の効果も利用できるようになるかもしれませんが、現在のところ利用できる効果は KeyframeEffect だけです。これは null （これがデフォルト値です）にすると、効果を適用しないことを示します。
timeline 省略可: アニメーションを関連付ける timeline を指定します。 AnimationTimeline インターフェイスに基づく型のオブジェクトを指定します。デフォルト値は Document.timeline ですが、null に設定することも可能です。

例

白うさぎを追いかけるの例では、Animation() コンストラクターを使用し、文書の timeline を利用して rabbitDownKeyframes 用の Animation を作成することができます。

const whiteRabbit = document.getElementById("rabbit");

const rabbitDownKeyframes = new KeyframeEffect(
  whiteRabbit,
  [{ transform: "translateY(0%)" }, { transform: "translateY(100%)" }],
  { duration: 3000, fill: "forwards" },
);

const rabbitDownAnimation = new Animation(rabbitDownKeyframes);