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

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

関連記事

コメントを残す

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

CAPTCHA


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

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31