CSSアニメーションを一時停止・再開する

[ ID : 9196 ]
CSSアニメーションを一時停止・再開する

概要

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';

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録