▲TOPへ戻る

【javascript】でアニメーションを途中でストップ、再開させる方法

topBtn

以下のように、アニメーションを途中でストップさせる方法について紹介します。

animationPlayState

animationPlayStaterunningpausedにすることで、 アニメーションをストップさせたり、再開させたりすることができます。

animationPlayState : running

javascript
  const box = document.querySelector(".box");
  box.style.animationPlayState = "running";
  
  function stopAni() {
    if (box.style.animationPlayState == "running") {
        box.style.animationPlayState = "paused";
    } else {
        box.style.animationPlayState = "running";
    }
  }

応用

以前、一文字ずつアニメーションさせる方法について紹介しましたが、 この方法を使えば、途中でストップさせることができます。

js
【CSS】【javascript】テキストを1文字ずつアニメーションさせる方法

クイズアプリを作る時に使えそうですね。

東京に住んでいるアメリカ人の友人から、「上から読んでも下から読んでも同じ地名の場所で待っている」という連絡を受けました。この友人はどこにいるのでしょうか?

point

アニメーションストップ:animationPlayState = "paused"

アニメーションスタート:animationPlayState = "running "

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ