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を追加・削除するとよさそうです。
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

コメントが承認されるまで時間がかかります。

2021年4月
 123
45678910
11121314151617
18192021222324
252627282930