【CSS】オンマウスでkeyframesのアニメーションを一時停止する方法

CSSの「keyframes」のアニメーションを一時停止する方法を紹介します。

ここで利用するのは「animation-play-state」プロパティ。

指定できる値は running と paused の2つで、running のほうは初期値なので省略が可能。
running を指定するとアニメーションが実行され、paused の指定でアニメーションが一時ストップします。

実際の挙動を確認したい方は以下のリンクからどうぞ。

DEMO : https://on-ze.com/demo/css-animation-play-state

上記のサンプルでは次のようなHTMLとCSSで実装しています。

HTML

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

CSS

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

もちろんJavaScriptからの制御も可能です。
頭の片隅に入れておくとイイかもしれませんね。

DEMO : https://on-ze.com/demo/css-animation-play-state