ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3でアニメーションを停止する方法

CSS3でアニメーションを停止する方法

青灯夜游
青灯夜游オリジナル
2022-01-20 16:14:0211445ブラウズ

CSS3 では、animation-play-state 属性を使用して、実行中のアニメーションを停止できます。この属性の機能は、アニメーションが実行中か一時停止かを指定することです。追加する必要があるのは、「animation-play」だけです。アニメーションを適用する要素に「 -state:paused;」スタイルで十分です。

CSS3でアニメーションを停止する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS3 では、animation-play-state 属性を使用して、実行中のアニメーションを停止できます。

例: 次のような回転アニメーションがあります:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 50px auto;
				animation: mymove 1s linear infinite;
			}
			@keyframes mymove {
				100% {
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove {/* Safari and Chrome */
				100% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

CSS3でアニメーションを停止する方法

div 要素の回転を停止したい場合は、animation-play- を設定できます。 state を div 要素に追加します。 属性は

div {
	width: 100px;
	height: 100px;
	background-color: red;
	margin: 50px auto;
	animation: mymove 1s linear infinite;
	animation-play-state:paused;
}

CSS3でアニメーションを停止する方法

説明:

animation-play-state 属性は、アニメーションが実行中か一時停止中かを指定します。

構文:

animation-play-state: paused|running;
  • paused: アニメーションが一時停止されていることを指定します。

  • running: アニメーションが再生中であることを指定します。

この属性を JavaScript で使用すると、再生中にアニメーションを一時停止できます。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3でアニメーションを停止する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。