PR

CSSアニメーションを一時停止・再開する方法を初心者向けに解説

【広告】

CSS の animation-iteration-count を infinite に設定すると、アニメーションはずっと繰り返されます。
この記事では、このような「無限に動き続けるアニメーション」を、ボタン操作で一時停止したり、再び動かしたりする方法を分かりやすく解説します。

JavaScript を学び始めたばかりの方でも理解できるよう、シンプルなサンプルコードを使って手順を紹介します。

動作をチェックしよう！

「start」を押すとリンゴが回転しながら大きさも変化します。
「stop」を押すと、その動きが一時停止します。
もう一度「start」を押すと、止めた位置からアニメーションが再開します。

ここからは、HTML・CSS・JavaScriptのコードをチェックしていきます。
コピペして利用することもできます。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>アニメーション一時停止</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrap">
      <img src="apple.png" />
      <div class="btns">
        <button id="startBtn">start</button>
        <button id="stopBtn">stop</button>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

全体を wrap で囲んで、リンゴの画像と2つのボタンを配置しています。

CSS

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  width: 80%;
  height: 80%;
  background-color: #fff;
  border: 1px solid #999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  display: block;
  margin: 0 auto;
}

.btns {
  margin-top: 50px;
}

button {
  width: 120px;
  padding: 12px 24px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

#startBtn {
  background-color: #2e7d32;
  margin-right: 10px;
}

#stopBtn {
  background-color: #c62828;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  75% {
    transform: rotate(270deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

img {
  width: 200px;
}

img.start {
  animation: rotate 5s linear infinite;
  transform-origin: center;
  animation-play-state: running;
}

img.paused {
  animation-play-state: paused;
}

body や .wrap は、中央配置やレイアウト調整のためのスタイルです。
button 関連の記述は、見た目とホバー時の軽い演出を設定しています。
img の基本スタイルでは、画像の幅（200px）を指定しています。

✅ 中央配置について詳しく解説
【コピペOK】Flexboxで要素を完璧に上下左右中央寄せする3行コード

ここからが本題のアニメーションです。

アニメーション部分の解説

1. @keyframes rotate

アニメーションの動作内容を定義しています。

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  75% {
    transform: rotate(270deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
動きのポイント
  • 0% → 360° まで１回転
  • 途中で scale（拡大率） を変えている
    • 25%：1.1倍
    • 50%：1.2倍
    • 75%：1.1倍
    • 100%：1倍に戻る
  • 回転に合わせて「少しふくらむように見える」演出になっている

これがアニメーション本体です。

2. img.start（アニメーション開始状態）

img.start {
  animation: rotate 5s linear infinite;
  transform-origin: center;
  animation-play-state: running;
}
重要ポイント
  • animation: rotate 5s linear infinite;
    • rotate：使うアニメーション名
    • 5s：1 周する時間
    • linear：一定速度
    • infinite：無限ループ
  • transform-origin: center;
    • 画像の中心を基準に回転
    • 設定しないと、環境によっては中心がズレたように見えることがある
  • animation-play-state: running;
    • アニメーションを「再生中」状態にする

JavaScript で .start クラスが付くと、この設定が反映され、回転が始まります。

✅ CSSアニメーションについて詳しく
CSSアニメーションの基本ルールと実践ガイド

✅ animationを一括指定について詳しく
【CSS】animationを一括指定でまとめて書く方法とサンプルコード

3. img.paused（一時停止状態）

img.paused {
  animation-play-state: paused;
}
動きのポイント
  • paused を付けるだけで、今の位置でアニメーションが停止する
  • .start の設定は消さないため
    → 止めた位置から再開できる

animation-play-state の仕組みを利用した、シンプルで分かりやすい停止・再開の実装です。

JavaScript

const img = document.querySelector('img');
const startBtn = document.querySelector('#startBtn');
const stopBtn = document.querySelector('#stopBtn');

stopBtn.disabled = true;

startBtn.addEventListener('click', () => {
  img.classList.add('start');
  img.classList.remove('paused');
  startBtn.disabled = true;
  stopBtn.disabled = false;
});

stopBtn.addEventListener('click', () => {
  img.classList.add('paused');
  stopBtn.disabled = true;
  startBtn.disabled = false;
});

1. 要素を取得する部分

const img = document.querySelector('img');
const startBtn = document.querySelector('#startBtn');
const stopBtn = document.querySelector('#stopBtn');

HTML の中から以下の要素を取得して、それぞれ変数に入れています。

  • 回転する画像（img）
  • start ボタン（#startBtn）
  • stop ボタン（#stopBtn）

JavaScript で操作する対象を準備する段階です。

2. ページ読み込み時の初期設定

stopBtn.disabled = true;

最初はまだアニメーションが始まっていないため、
stop ボタンは押せない状態（disabled） にします。

stop は「動いているものを止める」ボタンなので、最初から押せると不自然なためです。

3. start ボタンを押したときの処理

startBtn.addEventListener('click', () => {
  img.classList.add('start');
  img.classList.remove('paused');
  startBtn.disabled = true;
  stopBtn.disabled = false;
});
  1. img.classList.add('start')
    → CSS の .start クラスが付いてアニメーションが再生される
  2. img.classList.remove('paused')
    → 停止状態のクラスを外す（アニメーションを走らせる）
  3. startBtn.disabled = true
    → アニメーション中は start ボタンを押せないようにする
  4. stopBtn.disabled = false
    → stop ボタンを押して止められるようにする

4. stop ボタンを押したときの処理

stopBtn.addEventListener('click', () => {
  img.classList.add('paused');
  stopBtn.disabled = true;
  startBtn.disabled = false;
});
  1. img.classList.add('paused')
    → CSS の .paused が付いてアニメーションが一時停止する
  2. stopBtn.disabled = true
    → 停止中は stop ボタンを押せないようにする
  3. startBtn.disabled = false
    → 再び開始できるように start ボタンを有効にする

✅ ボタンの有効・無効を切り替えるサンプルコード
【JavaScript】disabledプロパティを使ってボタンの有効・無効の状態を切り替える方法

全体としてどんな仕組みか

  • アニメーションの開始／停止は CSS が担当
  • どの状態にするかを決めるのが JavaScript の役割

JavaScript は、画像に start や paused のクラスを付け替えるだけ。
そのクラスに応じて、CSS がアニメーションを再生したり停止したりします。

初心者でも理解しやすい、シンプルなアニメーション制御の書き方になっています。

【広告】
タイトルとURLをコピーしました