【CSS】keyframesのanimationをマウスオーバーで一時停止する方法

こんにちは、Ryohei（@ityryohei）です！

マウスオーバーでkeyframesのanimationを一時停止する方法のご紹介です。

アニメーションしている要素にマウスカーソルを載せると、アニメーションが一時停止状態に、マウスカーソルを外すと再びアニメーションが実行される処理になります。

具体的には、下記のデモのような動きになります。

See the Pen Keyframes Animation Paused｜CSS by ryoy (@intotheprogram) on CodePen.

本記事の内容

• アニメーションの実行・一時停止を制御する
• マウスオーバーでアニメーションを一時停止する

keyframesとanimationについては下記の記事で詳しく解説していますので、使い方から勉強されたい方はぜひご覧いただければ思います。

【HTML/CSS】@keyframesとanimationの使い方

本題に戻りまして、マウスオーバーでkeyframesのanimationを一時停止する方法を解説していきます。

アニメーションの実行・一時停止を制御する

アニメーションの実行・一時停止の制御は、「animation-play-state」というプロパティを使用して実装します。animationが指定されている要素に有効なプロパティーとなります。指定されていなければ動作しませんので、ご注意ください。

animation-play-stateは下記のように記述します。

実行

animation-play-state: running;

一時停止

animation-play-state: paused;

runningで実行、pausedで一時停止とわかりやすい記述となっています。

注意点として、アニメーションを一時停止した後に再開した場合、アニメーションは最初からではなく一時停止した地点から再開されます。その点だけ覚えておいていただければと思います。

マウスオーバーでアニメーションを一時停止する

アニメーションの実行・一時停止方法は上記でご説明した通りです。後は、マウスオーバー(hover)した際にアニメーションを一時停止するように記述して完成となります。

HTML

<div class="animation">Hover Me!</div>

CSS

@keyframes onBorder {
  from {
    background: #7287fb;
    border: 0px solid #fff;
  }
  to {
    background: #9cfcf8;
    border: 15px solid #fff;
  }
}

.animation {
  animation-name: onBorder;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

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

DEMO

See the Pen Keyframes Animation Paused｜CSS by ryoy (@intotheprogram) on CodePen.

まとめ

最後にアニメーションの実行・一時停止の記述方法をまとめます。

実行	animation-play-state: running;
一時停止	animation-play-state: paused;

以上、マウスオーバーでkeyframesのanimationを一時停止する方法のご紹介でした！

CSSのみで書かれたアニメーションのサンプルは、codepen等にたくさん公開されています。色々な記述方法を学んで、吸収して、自分だけのアニメーションを作り上げてくださいね。