Web animations
Animation はウェブアニメーション APIのインターフェイスで、アニメーションプレイヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。
EventTarget Animation
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 75 | 79 | 48 | 13.1 | 75 | 13.4 | |
| Animation() はウェブアニメーション API のコンストラクターで、新しい Animation オブジェクトのインスタンスを返します。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| ウェブアニメーション API の cancel() は Animation インターフェイスのメソッドで、このアニメーションによって引き起こされたすべての KeyframeEffectを初期化し、再生を中止します。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| cancel は Animation インターフェイスのイベントで、Animation.cancel() メソッドが呼び出された時や、アニメーションの再生が完了する前に要素から除去された時など、アニメーションが他の状態から "idle" 再生状態になった時に発行されます。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| commitStyles() はウェブアニメーション API の Animation インターフェイスのメソッドで、アニメーションの現在のスタイルの計算値をターゲット要素の style に書き込みます。 commitStyles() はアニメーションが自動削除されていてもうまく動作します。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| Animation.currentTime は ウェブアニメーション API のプロパティで、実行中か一時停止中かを問わず、アニメーションの現在の時刻をミリ秒単位で返したり設定したりします。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| Animation.effect は ウェブアニメーション API のプロパティで、アニメーションの対象とする効果を取得したり設定したりします。対象とする効果は AnimationEffect に基づくタイプの効果オブジェクト、例えば KeyframeEffect、または null です。 | 75 | 79 | 63 | 13.1 | 75 | 13.4 |
| finish() くち ウェブアニメーション API の Animation インターフェイスのメソッドで、現在の再生時刻を現在の再生方向に対応するアニメーションの末尾に設定します。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| finish は Animation インターフェイスのイベントで、アニメーションの再生が完了したとき、または Animation.finish() メソッドが呼び出されてアニメーションが即座に終了させられたときに発生します。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| Animation.finished は ウェブアニメーション API の読み取り専用プロパティで、アニメーションの再生が完了すると解決される Promise を返します。 | 84 | 84 | 63 | 13.1 | 84 | 13.4 |
| Animation.id は ウェブアニメーション API のプロパティで、このアニメーションを識別する文字列を返したり設定したりします。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| pause() はウェブアニメーション API のAnimation インターフェイスのメソッドで、アニメーションの再生を一時停止します。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| Animation.pending は ウェブアニメーション API の読み取り専用プロパティで、アニメーションが現在、再生開始や実行するアニメーションの一時停止などを行う非同期操作を待っているかどうかを示します。 | 76 | 79 | 59 | 13.1 | 76 | 13.4 |
| persist() はウェブアニメーション API の Animation インターフェイスのメソッドで、アニメーションを明示的に維持し、 他のアニメーションに置き換わったときに自動的に削除されるのを防ぎます。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| play() は ウェブアニメーション APIの インターフェイスのメソッドで、アニメーションの再生を開始または再開します。アニメーションが完了した場合、play() を呼び出すとアニメーションを再開し、最初から再生します。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| Animation.playbackRate はウェブアニメーション API で、アニメーションの再生レートを返すしたり設定したりします。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| Animation.playState はウェブアニメーション API の読み取り専用プロパティで、アニメーションの再生状態を説明する列挙値を返します。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| Animation.ready はウェブアニメーション API の読み取り専用プロパティで、アニメーションが再生可能になったときに解決するプロミス (Promise) を返します。アニメーションの再生状態が "pending" になるたびに、またアニメーションが取り消される可能性があるときにも、新しいプロミスが作成されます。 | 84 | 84 | 63 | 13.1 | 84 | 13.4 |
| remove は Animation インターフェイスのイベントで、アニメーションが自動的に除去された時にブラウザーによって発生します。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| 同じ要素に対して多数のアニメーションをトリガーすることが可能です。これらが無期限(つまり、順次追加される)ものである場合、アニメーションのリストが膨大になり、メモリリークを引き起こす可能性があります。このため、開発者が明示的に指定しない限り、ブラウザは新しいアニメーションに置き換えられた後、順次追加されたアニメーションを自動的に削除します… | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| Animation.replaceState は ウェブアニメーション API の読み取り専用プロパティで、アニメーションが別なアニメーションで置き換えられた後で、ブラウザーによって削除されたかどうかを示します。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| Animation.reverse() は インターフェイスのメソッドで、再生方向を逆にします。つまり、アニメーションはその先頭で終わります。再生されていないアニメーションで呼び出されると、アニメーション全体が逆再生されます。一時停止しているアニメーションで呼び出されると、アニメーションは逆に続けられます。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| Animation.startTime は Animation インターフェイスのプロパティで、倍精度浮動小数点値で、アニメーションの再生開始予定時刻を示します。 | 75 | 79 | 48 | 13.1 | 75 | 13.4 |
| Animation.timeline は Animation インターフェイスのプロパティで、このアニメーションに関連付けられた AnimationTimeline を返したり設定したりします。タイムラインは同期を目的とした時刻値の元であり、AnimationTimelineベースのオブジェクトです。既定値では、アニメーションのタイムラインと Document のタイムラインは同じです。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| updatePlaybackRate() はウェブアニメーション API の Animation インターフェイスのメソッドで、最初に再生位置を同期させた後に、アニメーションの速度を設定します。 | 76 | 79 | 60 | 13.1 | 76 | 13.4 |
| AnimationEffect はウェブアニメーション API のインターフェイスで、アニメーション効果を表すインターフェイスです。 | 75 | 79 | 63 | 13.1 | 75 | 13.4 |
| getComputedTiming() は AnimationEffect インターフェイスのメソッドで、このアニメーション効果のタイミングのプロパティの計算値を返します。 | 75 | 79 | 63 | 13.1 | 75 | 13.4 |
| AnimationEffect.getTiming() は AnimationEffect メソッドのインターフェイスで、アニメーション効果のタイミングプロパティを格納したオブジェクトを返します。 | 75 | 79 | 63 | 13.1 | 75 | 13.4 |
| updateTiming() は AnimationEffect インターフェイスのメソッドで、アニメーション効果の指定した時刻プロパティを更新します。 | 75 | 79 | 63 | 13.1 | 75 | 13.4 |
| AnimationPlaybackEvent はウェブアニメーション API のインターフェイスで、アニメーションイベントを表します。 | 84 | 84 | 63 | 13.1 | 84 | 13.4 |
| AnimationPlaybackEvent() はウェブアニメーション API のコンストラクターで、新しい AnimationPlaybackEvent オブジェクトインスタンスを返します。 | 84 | 84 | 63 | 13.1 | 84 | 13.4 |
| currentTime は AnimationPlaybackEvent インターフェイスの読み取り専用プロパティで、イベントがキューに入った瞬間の、イベントを生成したアニメーションの現在時刻を表します。イベントが生成された時刻にアニメーションが idle であった場合、これは未解決になります。 | 84 | 84 | 63 | 13.1 | 84 | 13.4 |
| timelineTime は AnimationPlaybackEvent インターフェイスの読み取り専用プロパティで、イベントがキューに入った瞬間のアニメーションの AnimationTimeline の時刻値を表します。イベントが生成された時刻にアニメーションがタイムラインに関連付けられていなかったり、関連付けられていたタイムラインが非アクティブだった場合、これは未解決になります。 | 84 | 84 | 63 | 13.1 | 84 | 13.4 |
| AnimationTimeline はウェブアニメーション API のインターフェイスで、アニメーションのタイムラインを表します。このインターフェイスは、他のタイムライン型を継承するタイムライン機能を定義するために存在します。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| currentTime はウェブアニメーション API の AnimationTimeline インターフェイスの読み取り専用のプロパティで、タイムラインの現在時刻をミリ秒単位で返します。タイムラインがアクティブでない場合は null を返します。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| Web Animations API の AnimationTimeline インターフェースの read-only プロパティ `duration` は、このタイムラインの最大値、または null を返します。 | 115 | 115 | | 26 | 115 | 26 |
| getAnimations() メソッドは Document インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての Animation オブジェクトの配列を返します。この配列には CSS アニメーション, CSS トランジション, ウェブアニメーション が含まれます。 | 84 | 84 | 75 | 14 | 84 | 14 |
| timeline は Document インターフェイスの読み取り専用プロパティで、現在の文書の既定のタイムラインを表します。このタイムラインは DocumentTimeline の特別なインスタンスです。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| DocumentTimeline はウェブアニメーション API のインターフェイスで、(Document.timeline からアクセスできる)既定の文書タイムラインを含むアニメーションタイムラインを表します。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| DocumentTimeline() はウェブアニメーション API のコンストラクターで、現在の閲覧コンテキストのアクティブな文書に関連付けられた DocumentTimeline オブジェクトの新しいインスタンスを作成します。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| Element インターフェイスの animate() メソッドは、新しい Animation を生成し、この要素へ適用し、そしてアニメーションの再生を行うショートカットメソッドです。生成した Animation オブジェクトのインスタンスを返します。 | 36 | 79 | 48 | 13.1 | 36 | 13.4 |
| キーフレーム間の暗黙的な変換がサポートされています | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
animate (options composite parameter) `options.composite` パラメータ | 84 | 84 | 80 | 16 | 84 | 16 |
animate (options id parameter) `options.id` パラメータ | 50 | 79 | 48 | 13.1 | 50 | 13.4 |
animate (options iterationComposite parameter) `options.iterationComposite` パラメータ | | | 80 | 16.4 | | 16.4 |
animate (options pseudoElement parameter) `options.pseudoElement` パラメータ | 84 | 84 | 75 | 14 | 84 | 14 |
animate (options rangeEnd parameter) `options.rangeEnd` パラメータ | 115 | 115 | | 26 | 115 | 26 |
animate (options rangeStart parameter) `options.rangeStart` パラメータ | 115 | 115 | | 26 | 115 | 26 |
animate (options timeline parameter) `options.timeline` パラメータ | 85 | 85 | | 16 | 85 | 16 |
| animationcancel イベントは、 CSS アニメーションが予期せず中断されたときに発生します。言い換えれば、 Element/animationend_event イベントを送出せずに実行が停止するときはいつでもです。これは animation-name が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。 | 83 | 83 | 54 | 13.1 | 83 | 13.4 |
| animationend イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 animationend イベントは発生しません。 | 79 | 18 | 51 | 9 | 79 | 9 |
| animationiteration イベントは、 CSS アニメーションの反復が 1 回分終了し、次の回が始まったときに発生します。このイベントは Element/animationend_event イベントと同時には発生せず、従って animation-iteration-count が 1 のアニメーションでは発生しません。 | 79 | 18 | 51 | 9 | 79 | 9 |
| animationstart イベントは、 CSS アニメーションが開始したときに発生します。 animation-delay がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは AnimationEvent/elapsedTime が待ち時間の絶対値と等しくなったときに発生します(および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。 | 79 | 18 | 51 | 9 | 79 | 9 |
| getAnimations() は Element インターフェイスのメソッドで(Animatable ミックスインで指定されており)、この要素に影響を与える、あるいは将来的に影響を与える予定のすべての Animation オブジェクトの配列を返します。オプションとして、子孫要素の Animation オブジェクトも返すことができます。 | 84 | 84 | 75 | 13.1 | 84 | 13.4 |
| KeyframeEffect はウェブアニメーション API のインターフェイスで、キーフレームと呼ばれるアニメーション可能なプロパティと値のセットを作成することができます。これらは Animation.Animation コンストラクターを使用して再生できます。 | 75 | 79 | 63 | 13.1 | 75 | 13.4 |
| composite は KeyframeEffect のプロパティで、要素のアニメーションがその基盤となるプロパティ値に与える影響を決定します。 | 84 | 84 | 80 | 16 | 84 | 16 |
| getKeyframes() は KeyframeEffect のメソッドで、このアニメーションを構成する計算済みキーフレームとその計算済みオフセットの配列を返します。 | 84 | 84 | 63 | 13.1 | 84 | 13.4 |
| iterationComposite は KeyframeEffect のプロパティで、アニメーションのプロパティ値の変化が、アニメーションのそれぞれの反復処理においてどのように累積または上書きされるかを決定します。 | | | 80 | 16.4 | | 16.4 |
| KeyframeEffect() はウェブアニメーション API のコンストラクターで、新しい KeyframeEffect オブジェクトインスタンスを返し、また既存のキーフレーム効果オブジェクトインスタンスを複製することもできます。 | 75 | 79 | 63 | 13.1 | 75 | 13.4 |
| pseudoElement は KeyframeEffect インターフェイスのプロパティで、アニメーションの対象となる擬似要素を表す文字列です。擬似要素を対象としないアニメーションでは null となる場合があります。CSS によって生成されるアニメーションおよびトランジションを除き、ゲッターおよびセッターの両方として機能します。 | 84 | 84 | 75 | 14 | 84 | 14 |
| setKeyframes() は KeyframeEffect インターフェイスのメソッドで、影響する KeyframeEffect を構成するキーフレームを、新しいキーフレームのセットに設定して置き換えます。 | 84 | 84 | 63 | 13.1 | 84 | 13.4 |
| target は KeyframeEffect インターフェイスのプロパティで、アニメーションの対象となる要素または擬似要素を表します。特定の要素をターゲットとしないアニメーションでは null となる場合があります。CSS によって生成されるアニメーションおよび遷移を除き、ゲッターおよびセッターの両方として機能します。 | 75 | 79 | 63 | 13.1 | 75 | 13.4 |
| getAnimations() は ShadowRoot のメソッドで、ターゲット要素がシャドウツリーの子孫である、現在有効なすべての Animation オブジェクトの配列を返します。この配列には CSS アニメーション、CSS トランジション、ウェブアニメーション が含まれています。 | 84 | 84 | 75 | 14 | 84 | 14 |
- バージョン59以前は、保留中のステータスは `Animation.playState` から返される `"pending"` という値によって示されていました。
- Chrome 50/Opera 37 以前では、このプロパティは、まだ開始されていないアニメーションに対して `idle` を返していました。Chrome 50/Opera 37 以降では、`paused` を返すようになりました。
- Firefox 59 以前では、非同期処理が完了していないアニメーションに対して、このプロパティは `pending` を返していましたが、Firefox 59 以降では、これは別の `Animation.pending` プロパティによって示されるようになりました。これは、仕様の最近の変更を反映したものです。
- Chrome Android 50/Opera 37 以前では、このプロパティは、まだ開始されていないアニメーションに対して `idle` を返していました。Chrome Android 50/Opera 37 以降では、`paused` を返すようになりました。
- ゲッターのみがサポートされています
- ゲッターのみがサポートされています
- ゲッターのみがサポートされています
- このバージョンで機能が削除されました (63)
- 以前は別名で対応していました: AnimationEffectReadOnly (48)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (14)
- 仕様の旧バージョンを実装しています。バグ179536を参照してください。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (14)
- 仕様の旧バージョンを実装しています。バグ179536を参照してください。
- このブラウザでは部分的にしか実装されていません
- 実装には若干の不具合があるようです。詳細が判明次第、追ってご連絡いたします。
- このブラウザでは部分的にしか実装されていません
- 実装には若干の不具合があるようです。詳細が判明次第、追ってご連絡いたします。
- このブラウザでは部分的にしか実装されていません
- `onanimationcancel` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('animationcancel', function() {});` を使用してください。バグ 41404325 を参照してください。
- このブラウザでは部分的にしか実装されていません
- `onanimationcancel` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('animationcancel', function() {});` を使用してください。バグ 41404325 を参照してください。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (13.1)
- `onanimationcancel` イベントハンドラプロパティはサポートされていますが、`animationcancel` イベントは決して発生しません。
- このブラウザでは部分的にしか実装されていません
- `onanimationcancel` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('animationcancel', function() {});` を使用してください。バグ 41404325 を参照してください。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (13.4)
- `onanimationcancel` イベントハンドラプロパティはサポートされていますが、`animationcancel` イベントは決して発生しません。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (79)
- `onanimationend` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationend', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (18)
- `onanimationend` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationend', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (51)
- `onanimationend` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationend', function() {});` を使用してください。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (79)
- `onanimationend` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationend', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (79)
- `onanimationiteration` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationiteration', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (18)
- `onanimationiteration` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationiteration', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (51)
- `onanimationiteration` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationiteration', function() {});` を使用してください。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (79)
- `onanimationiteration` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationiteration', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (79)
- `onanimationstart` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationstart', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (18)
- `onanimationstart` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationstart', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (51)
- `onanimationstart` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationstart', function() {});` を使用してください。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (79)
- `onanimationstart` イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`document.addEventListener('animationstart', function() {});` を使用してください。
- ベンダープレフィックス付きで対応: webkit (81)
実務での使いどころ
-
Web animations の活用
Animation はウェブアニメーション APIのインターフェイスで、アニメーションプレイヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。