CSS animate がループしない場合はどうすればよいですか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2021-12-29 15:09:14

オリジナル

2710 人が閲覧しました

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 がループしない場合はどうすればよいですか?