suchen

Heim  >  Artikel  >  Web-Frontend  >  Was soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?

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

青灯夜游
青灯夜游Original
2021-12-29 15:09:142708Durchsuche

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>

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

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist CSS3 und HTML5?Nächster Artikel：Was ist CSS3 und HTML5?

In Verbindung stehende Artikel

Mehr sehen