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 2020年3月.

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

ブラウザーの互換性

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 2024年5月18日 by MDN contributors.

View this page on GitHub • Report a problem with this content

ウェブアニメーション API
Animation
コンストラクター
1. Animation()
インスタンスプロパティ
インスタンスメソッド
イベント
継承
1. EventTarget
Web Animations に関連するページ
ガイド
1. ウェブアニメーション API の使用
2. ウェブアニメーション API の概念
3. キーフレームの形式
4. CSS アニメーションのヒントとコツ

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

In this article

構文

引数

例

仕様書

ブラウザーの互換性

関連情報

Help improve MDN