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

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

構文

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

引数

effect 省略可

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

timeline 省略可

アニメーションを関連付ける timeline を指定します。 AnimationTimeline (en-US) インターフェイスに基づく型のオブジェクトを指定します。現在利用できるタイムラインは DocumentTimeline (en-US) だけですが、将来的にはジェスチャーやスクロールに関連するタイムラインも利用できるようになるかもしれません。既定値は 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

関連情報