Web Animations API 一時停止と再生サンプル

一時停止と再生

.star {
  display: inline-block;
  font-size: 3em;
}

const star = document.querySelector('.star');
const button = document.getElementById('button');

const starAnime = star.animate([
  { transform: 'rotate(360deg)' },
], {
  duration: 1000,
  iterations: Infinity,
});

button.addEventListener('click', () => {
  starAnime.playState === 'running' ?
    starAnime.pause() :
    starAnime.play();
});

元記事を表示する