WebAnimations API で CSS アニメーションを操作してみる①

初 Zenn 記事になります。

Web Animations API に魅了され素晴らしさを少しでも紹介できればと思います🚀
このドキュメントでは Web Animations API の触り部分を紹介しています。

Web Animations API とは？

W3C という Web の標準化団体で決められた CSS アニメーションや CSS トランジションを JavaScript から操作する API です。
https://www.w3.org/TR/web-animations-1/

実装状況

https://caniuse.com/web-animation

2022年5月18日時点

ほとんどの主要ブラウザで実装済みとされていて、フルスペックを使うことができます。

Animation / Timeline / Effect

Web Animations API で重要なモデルとして、Animation / Timeline / Animation Effect(keyframe effect) モデルがあります。

W3C Web Animation 仕様書「4.1.2. Hierarchical」より抜粋

Timeline

アニメーションを同期するための基準となる時刻を提供するモデルです。通常は document.timeline オブジェクトが利用されます。この Timeline は今開いているドキュメント全体の基準時間なので、アニメーションの現在の秒数ではありません。

以下は、アニメーションの現在時間と document.timeline.currentTime を比較したものです。 play / pause を押すとアニメーションが再生・停止します。

アニメーションが停止している間でも document.timeline.currentTime が進んでいます。

Animation Effect(Keyframe Effect)

アニメーションにかけるエフェクトです。現時点でのエフェクトはキーフレームエフェクトのみ定義しています。キーフレームエフェクトのエフェクト値(ここではキーフレーム)は、段階的な CSS プロパティを配列で記述する方法と、CSS プロパティごとの段階的な値を記述する方法2つが存在します。以下の2つの記述は同じキーフレームを記載しています。

① 配列で記載する方法

[
  { opacity: 0.0, transform: "rotate(0deg)" },
  { opacity: 0.5, transform: "rotate(180deg)" },
  { opacity: 1.0, transform: "rotate(360deg)" }
]

② CSS プロパティごとの段階的な値を記述する方法

{
  opacity: [ 0.0, 0.5, 1.0 ],
  transform: [ "rotate(0deg)", "rotate(180deg)", "rotate(360deg)" ]
}

以下は要素をアニメーションするサンプルですが、animate() の第一引数に与えている配列がキーフレームエフェクトになります。

document.getElementById("target").animate([
    { transform: "rotate(0deg)" },
    { transform: "rotate(360deg)" }
  ], { duration: 1000, iterations: Infinity }
);