keyframesのアニメーションを一時停止する

keyframesのアニメーションで一時停止する方法をメモ。

サンプルコード

animation-play-stateプロパティでpausedを指定すると一時停止になります。
オンマウス時に停止するようにしてみます。

HTML

<div class="sample"></div>

CSS

.sample {
	width: 100px;
	height: 100px;
	background: #000;
	animation: move 2s linear infinite alternate;
}
@keyframes move {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(200px);
	}
}
.sample:hover {
	animation-play-state: paused;
}

アニメーションしている要素にオンマウスすると一時停止するようになりました。
一時停止のデモページ

一時停止用のclassを用意しておいて、一時停止・再開したいタイミングでJavaScriptでclassを追加・削除するとよさそうです。