Web Animation API

アニメーションを コードで操作する

element.animate() が返すのは Animation オブジェクトです。
再生・停止・巻き戻しを、コードから操作できます。

01 — Controllable

動きを、あとから操作する

element.animate() は Animation オブジェクトを返します。
再生・一時停止・逆再生・速度変更を、動いている最中でも呼び出せます。
下のボタンで試してみてください。

Play / Pause / Reverse / Rate。CSS のアニメーションでは、ここまで細かく制御できません。

02 — Orchestration

タイミングをずらして動かす

delay をずらすと、同じ動きが波のように広がります。

PARALLEL — delay をずらして、まとめて動かす

03 — Scroll-linked

スクロールに合わせて再生する

currentTime をスクロール量に結びつけると、
ページを進めた分だけアニメーションが進みます。