ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS animate がループしない場合はどうすればよいですか?

CSS animate がループしない場合はどうすればよいですか?

青灯夜游
青灯夜游オリジナル
2021-12-29 15:09:142738ブラウズ

animation-iteration-count 属性を CSS で使用すると、アニメーションがループしない問題を解決できます。この属性はアニメーションの再生回数を定義します。設定する必要があるのは、「animation-iteration-count」だけです。 count:infinite;" スタイルをアニメーションに追加してこれを実現します。無限にループします。

CSS animate がループしない場合はどうすればよいですか?

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

CSS のアニメーションはループしません。これは、animation-iteration-count 属性を使用することで解決できます。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: pink;
				margin: 100px;
				animation: mymove 5s;
				-webkit-animation: mymove 5s; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}

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

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

CSS animate がループしない場合はどうすればよいですか?

正回転と逆回転のみがオーバーフローし、回転を実現するループはありません。これを解決するには、単純に、animation-iteration-count 属性を使用するだけです。

div {
	width: 100px;
	height: 100px;
	background: pink;
	margin: 100px;
	animation: mymove 5s;
	-webkit-animation: mymove 5s; /* Safari and Chrome */
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;/* Safari and Chrome */
}

CSS animate がループしない場合はどうすればよいですか?

手順:

animation-iteration-count 属性を使用して、アニメーションの再生回数を定義します。構文:

animation-iteration-count: value;
Value Description
n アニメーションの再生回数を定義する数値
infinite アニメーションを無限回 (永久) 再生することを指定します

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

以上がCSS animate がループしない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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