概要
CSSのanimationプロパティを使用したアニメーションを一時停止・再開する方法を紹介。実装
1-1. アニメーション一時停止(CSS)
animation-play-state: paused;
1-2. アニメーション再開(CSS)
animation-play-state: running; //初期値
2. アニメーション一時停止・再開(JS)
const elem = document.querySelector('sample');
/**** 一時停止 ****/
elem.style.animationPlayState = 'paused';
/**** 再開 ****/
elem.style.animationPlayState = 'running';
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)