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

Baseline Widely available

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

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

構文

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

引数

effect 省略可

アニメーションに割り当てる、 AnimationEffect インターフェイスに基づくオブジェクトとして対象となる効果です。将来的には SequenceEffect や GroupEffect などの他の効果も利用できるようになるかもしれませんが、現在のところ利用できる効果は KeyframeEffect だけです。これは null （これが既定値です）にすると、効果を適用しないことを示します。

timeline 省略可

アニメーションを関連付ける timeline を指定します。 AnimationTimeline インターフェイスに基づく型のオブジェクトを指定します。現在利用できるタイムラインは DocumentTimeline だけですが、将来的にはジェスチャーやスクロールに関連するタイムラインも利用できるようになるかもしれません。既定値は Document.timeline ですが、null に設定することも可能です。

例

「白兎を追え」の例では、 Animation() コンストラクターを使用して Animation を rabbitDownKeyframes に対して、文書の timeline を使用して生成しています。

js
const rabbitDownAnimation = new Animation(
  rabbitDownKeyframes,
  document.timeline,
);

仕様書

Specification
Web Animations
# dom-animation-animation

ブラウザーの互換性

BCD tables only load in the browser

関連情報