CSS3で数秒後にアニメーションを再生するように設定する方法-フロントエンドQ&A-php.cn

CSS3で数秒後にアニメーションを再生するように設定する方法

青灯夜游

リリース： 2022-03-18 16:33:46

オリジナル

3190 人が閲覧しました

CSS3 では、アニメーション遅延属性を使用して、数秒後にアニメーションが再生されるように設定できます。この属性は、オブジェクトアニメーションの遅延時間、つまりアニメーションが開始されるまでの待ち時間を設定できます。、秒またはミリ秒で指定します。構文「animation -lay: value unit;」。単位は秒 (s) またはミリ秒 (ms) です。

CSS3で数秒後にアニメーションを再生するように設定する方法

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

CSS3 では、アニメーション遅延属性を使用して、数秒後にアニメーションが再生されるように設定できます。

アニメーション遅延プロパティは、オブジェクトアニメーションの遅延時間を任意に取得または設定できます。つまり、アニメーションの開始時期を定義します。

構文:

animation-delay: time;

ログイン後にコピー

time: アニメーションを開始するまでの待機時間を秒またはミリ秒で定義します (値の単位は秒またはミリ秒です) ms) ;デフォルト値は 0 です。

ヒント: 負の値は許可されます。-2 を指定すると、アニメーションがすぐに開始されますが、アニメーションに入るまでの 2 秒がスキップされます。

例: アニメーションを開始するまで 5 秒遅延します

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

				/*Safari and Chrome*/
				-webkit-animation: mymove 5s infinite;
				-webkit-animation-delay: 5s;
			}

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

				to {
					left: 200px;
				}
			}

			@-webkit-keyframes mymove

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

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

		<div></div>

	</body>
</html>

ログイン後にコピー

CSS3で数秒後にアニメーションを再生するように設定する方法