【CSS】hoverでアニメーションを停止する方法

CSS のアニメーションを適用している要素を、マウスオーバー（:hover）したときに一時停止させたいことがあります。その場合は animation-play-state を利用します。animation-play-state はアニメーションの再生・停止を制御できるプロパティです。

基本構文

.element {
  animation: move 5s linear infinite;
}

.element:hover {
  animation-play-state: paused; /* ホバー時に停止 */
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

上記の例では、要素が横に移動し続けますが、マウスを乗せると一時停止します。マウスを外すと再びアニメーションが再開されます。

複数アニメーションを停止する

複数のアニメーションを指定している場合も、animation-play-state: paused; を指定すればすべて一時停止できます。

.multi {
  animation: bounce 2s infinite, fade 5s infinite;
}

.multi:hover {
  animation-play-state: paused; /* すべてのアニメーションを停止 */
}

transition ではなく animation のみ対象

animation-play-state が効くのは CSS animation に対してのみです。transition は対象外なので注意してください。トランジションを停止したい場合は JavaScript などで制御する必要があります。

まとめ

• animation-play-state を paused にするとアニメーションが停止する
• :hover と組み合わせればマウスオーバーで停止・解除が可能
• 複数アニメーションにもまとめて適用できる
• transition は対象外なので別途対策が必要

ユーザー操作時にアニメーションを一時停止することで、見やすさや可読性を高めることができます。装飾や動きのある UI を作る際にぜひ活用してください。