animation-play-stateでアニメーションの再生・一時停止を指定【CSS】

animation-play-stateプロパティは、アニメーションの再生・停止を指定するプロパティです。

{animation-play-state: 再生状態;}

animation-play-stateの値の指定方法

animation-play-stateプロパティでは以下の値で、再生もしくは一時停止を指定します。

runningを指定すると、止まっているアニメーションが再生します。

pausedを指定すると、再生中のアニメーションが一時停止します。

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

@keyframes ex-animation {
　0%{width: 50px;height: 70px;}
　100px{width: 200px;height: 70px;}
}

上の赤いボックスは幅が50pxから200pxに大きくなるアニメーションですが、マウスオーバーで一時停止するようになっています。