1 回だけループする CSS3 アニメーションにはどのような属性が使用されますか?-フロントエンドQ&A-php.cn

1 回だけループする CSS3 アニメーションにはどのような属性が使用されますか?

青灯夜游

リリース： 2022-03-18 15:46:01

オリジナル

2547 人が閲覧しました

css3 アニメーションは 1 回だけループし、「animation-iteration-count」属性で設定されます。この属性はアニメーションの実行回数を指定できます。この属性の値が 1 の場合、アニメーションは1 回だけループするように設定します。構文「要素 {animation-iteration-count:1;}」。

1 回だけループする CSS3 アニメーションにはどのような属性が使用されますか?

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

css3 アニメーションは 1 回だけループし、animation-iteration-count プロパティで設定されます。

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

この属性の値が 1 の場合、アニメーションは 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 {
				0% {
					top: 0px;
				}

				50% {
					top: 200px;
				}
				100% {
					top: 0px;
				}
			}

			@-webkit-keyframes mymove{ /* Safari and Chrome */
			
				0% {
					top: 0px;
				}
				
				50% {
					top: 200px;
				}
				100% {
					top: 0px;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

ログイン後にコピー

1 回だけループする CSS3 アニメーションにはどのような属性が使用されますか?