Web Animations API は Chrome 36 で初めてリリースされました。ブラウザ内のアニメーションを JavaScript で簡単に制御できます。Gecko と WebKit にも実装されています。
Chrome 50 では、他のブラウザとの相互運用性を改善し、仕様に準拠するために変更が導入されています。変更内容は次のとおりです。
- 予定をキャンセルする
Animation.idpause()メソッドの状態の変更- キーフレームのキーとしてダッシュ付きの名前のサポート終了
Chrome 51 では、これらの変更の一部が確定しています。
- キーフレームのキーとしてダッシュ付きの名前を削除
予定をキャンセルする
Animation インターフェースには、アニメーションをキャンセルするメソッドが含まれています。このメソッドの名前は、なんと cancel() です。Chrome 50 では、メソッドが仕様どおりに呼び出されるとキャンセル イベントの発生を実装します。これにより、oncancel 属性が初期化されている場合は、その属性を介してイベント処理がトリガーされます。
Animation.id のサポート
element.animate() を使用してアニメーションを作成するときに、いくつかのプロパティを渡すことができます。たとえば、オブジェクトの不透明度をアニメーション化する例を次に示します。
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
id プロパティを指定すると、返された Animation オブジェクトに設定されます。これは、処理する Animation オブジェクトが多数ある場合にコンテンツのデバッグに役立ちます。インスタンス化するアニメーションに id を指定する方法の例を次に示します。
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
pause() メソッドの状態変化
pause() メソッドは、進行中のアニメーションを一時停止するために使用します。playState 属性を使用してアニメーションの状態を確認すると、paused() メソッドが呼び出された後に paused に設定されます。Chrome バージョン 50 より前では、アニメーションがまだ開始されていない場合、playState 属性は idle を示していましたが、現在は正しい状態（paused）を反映しています。
キーフレームのキーとしてダッシュ付きの名前を削除
仕様と他の実装にさらに準拠するため、Chrome 50 では、キーフレーム アニメーションのキーにダッシュ付きの名前が使用されている場合に、コンソールに警告が送信されます。使用できる正しい文字列は、CSS プロパティから IDL 属性への変換アルゴリズムに従って、キャメルケースの名前です。
たとえば、CSS プロパティ margin-left では、marginLeft をキーとして渡す必要があります。
Chrome 51 ではダッシュ付きの名前のサポートが完全に削除されるため、既存のコンテンツを仕様に従って正しい名前に修正する良い機会です。
概要
これらの変更により、Chrome の Web アニメーションの実装は他のブラウザの実装に近づき、仕様に準拠するようになります。これにより、ウェブページのコンテンツ作成が簡素化され、相互運用性が向上します。