Welche Attribute werden für CSS3-Animationen verwendet, die nur einmal wiederholt werden?-Front-End-Fragen und Antworten-php.cn

Welche Attribute werden für CSS3-Animationen verwendet, die nur einmal wiederholt werden?

青灯夜游

Freigeben： 2022-03-18 15:46:01

Original

2547 Leute haben es durchsucht

Die CSS3-Animation wird nur einmal wiederholt und mit dem Attribut „animation-iteration-count“ festgelegt. Dieses Attribut kann die Anzahl der Ausführungen der Animation angeben. Wenn der Wert dieses Attributs 1 ist, kann die Animation auf eine Schleife festgelegt werden nur einmal; die Syntax „element {animation-iteration“ -count:1;}“.

Welche Attribute werden für CSS3-Animationen verwendet, die nur einmal wiederholt werden?

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

css3-Animation wird nur einmal wiederholt und mit dem Attribut animation-iteration-count festgelegt.

Das Attribut „animation-iteration-count“ kann die Anzahl der Ausführungen der Animation angeben und definieren, wie oft die Animation abgespielt werden soll.

Wenn der Wert dieses Attributs 1 ist, kann die Animation so eingestellt werden, dass sie nur einmal wiederholt wird.

Beispiel:

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

				/* Safari and Chrome */
				-webkit-animation: mymove 3s;
				-webkit-animation-iteration-count: 1;
			}

			@keyframes mymove {
				0% {
					top: 0px;
				}

				50% {
					top: 200px;
				}
				100% {
					top: 0px;
				}
			}

			@-webkit-keyframes mymove{ /* Safari and Chrome */
			
				0% {
					top: 0px;
				}
				
				50% {
					top: 200px;
				}
				100% {
					top: 0px;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Nach dem Login kopieren

Welche Attribute werden für CSS3-Animationen verwendet, die nur einmal wiederholt werden?

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWelche Attribute werden für CSS3-Animationen verwendet, die nur einmal wiederholt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!