Daily Code / JavaScript・ブラウザ標準API
📦 Web Animations APIで荷物カードを運んでみよう
このデモについて
荷物カードの往復を再生・一時停止・速度変更して観察します。外部ライブラリ・ログイン・APIキーは不要です。
まず試す
「再生」→「速度を2倍」→「一時停止」→「リセット」。動きと状態の文字表示を見比べます。
📦荷物
読み込み中…
動きを減らす設定
OSの動き軽減設定が有効なら静止表示にし、再生操作は無効にします。変更後は再読み込みして確認してください。
動く仕組み
Element.animate() は Animation オブジェクトを返します。play()、pause()、cancel()、updatePlaybackRate()で制御します。