Was soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?-Front-End-Fragen und Antworten-php.cn

Was soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?

青灯夜游

Freigeben： 2021-12-29 15:09:14

Original

2717 Leute haben es durchsucht

Das Attribut „animation-iteration-count“ kann in CSS verwendet werden, um das Problem zu lösen, dass die Animation nicht wiederholt wird. Dieses Attribut definiert die Anzahl der Wiedergaben der Animation. Sie müssen nur „animation-iteration-count:infinite;“ festlegen. „Stil für die Animation, um eine Endlosschleife zu erreichen.

Was soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die Animation in CSS läuft nicht in einer Schleife, was durch die Verwendung des Attributs „animation-iteration-count“ gelöst werden kann.

Zum Beispiel:

<!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>

Nach dem Login kopieren

Was soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?

Nur Vorwärts- und Rückwärtsdrehung überläuft, und es gibt keine Schleife, um eine Drehung zu erreichen. Ganz einfach, verwenden Sie einfach das Attribut „animation-iteration-count“, um das Problem zu lösen.

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 */
}

Nach dem Login kopieren

Was soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?

Anleitung:

Verwenden Sie das Attribut „animation-iteration-count“, um zu definieren, wie oft die Animation abgespielt wird. Syntax:

animation-iteration-count: value;

Nach dem Login kopieren

Wert	Beschreibung
n	Eine Zahl, die definiert, wie oft die Animation abgespielt werden soll
unendlich	Gibt an, dass die Animation unendlich abgespielt werden soll mal ( für immer)

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!