css3アニメーションを一度設定して実行する方法-CSSチュートリアル-php.cn

css3アニメーションを一度設定して実行する方法

青灯夜游

リリース： 2022-01-13 12:50:35

オリジナル

9963 人が閲覧しました

CSS3 では、animation-iteration-count 属性を使用して、アニメーションを 1 回実行するように設定できます。この属性の機能は、アニメーションが再生される回数を定義することです。 anime-iteration-count 属性を数値「1」に設定すると、アニメーションを 1 回だけ再生するように設定できます。

css3アニメーションを一度設定して実行する方法

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

CSS3 では、animation-iteration-count 属性を使用して、アニメーションを 1 回だけ実行するように設定できます。

animation-iteration-count 属性では、アニメーションの再生回数を定義し、アニメーションを何回再生するかを設定できます。

構文:

animation-iteration-count: value;

ログイン後にコピー

値	説明
n	アニメーションを何回再生するかを定義する数値
infinite	アニメーションを無限に再生することを指定します回数 (永久)

#例:

アニメーションを 1 回だけ再生するように設定します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 3s;
				animation-iteration-count: 1;

				/* Safari and Chrome */
				-webkit-animation: mymove 3s;
				-webkit-animation-iteration-count: 1;
			}

			@keyframes mymove {
				from {
					top: 0px;
				}

				to {
					top: 200px;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				from {
					top: 0px;
				}

				to {
					top: 200px;
				}
			}
		</style>
	</head>
	<body>
		<div></div>

	</body>
</html>

ログイン後にコピー

css3アニメーションを一度設定して実行する方法

これを変更して、アニメーションが 3 回再生されるように設定します

div {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
	animation: mymove 3s;
	animation-iteration-count: 3;

	/* Safari and Chrome */
	-webkit-animation: mymove 3s;
	-webkit-animation-iteration-count: 3;
}

ログイン後にコピー

css3アニメーションを一度設定して実行する方法