Was sind die vier verwandten Eigenschaften der CSS3-Animation?-Front-End-Fragen und Antworten-php.cn

Was sind die vier verwandten Eigenschaften der CSS3-Animation?

青灯夜游

Freigeben： 2022-01-17 18:49:45

Original

2192 Leute haben es durchsucht

Css3 legt vier verwandte Attribute für die Animation fest: 1. Transformationsattribut, das zum Anwenden von 2D- oder 3D-Transformationen auf Elemente verwendet wird; 2. Übergangsattribut, das zum Erzielen von Übergangseffekten verwendet wird; „@keyframes“ definiert das Verhalten eines Animationszyklus.

Was sind die vier verwandten Eigenschaften der CSS3-Animation?

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

Im Allgemeinen gibt es nur drei Eigenschaften der CSS3-Animation: Transformation, Übergang und Animation. Das Attribut

transformtransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

<strong>animation</strong> 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

animation 属性需要和@keyframes规则一起使用，才可创建动画。

<strong>@keyframes</strong> wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

transition

Die Eigenschaft ist eine Abkürzungseigenschaft zum Festlegen von vier Übergangseigenschaften:

transition-property
li>
transition-duration
transition-timing-function
transition-delay

Der

Die Eigenschaft „animation

“ ist eine Abkürzungseigenschaft zum Festlegen von sechs Animationseigenschaften: Was sind die vier verwandten Eigenschaften der CSS3-Animation?

animation-name

animation -duration

animation-timing-function🎜
🎜animation-delay🎜
🎜animation-iteration-count🎜
🎜animation-direction🎜

🎜animation-Attribut muss zusammen mit @keyframes-Regeln verwendet werden, um Animationen zu erstellen. 🎜🎜🎜@keyframes🎜🎜 Regeln🎜🎜🎜Mit @keyframes-Regeln können Sie Animationen erstellen. 🎜🎜Das Prinzip beim Erstellen von Animationen besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln. 🎜🎜Sie können diesen Satz CSS-Stile während des Animationsprozesses mehrmals ändern. 🎜🎜Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen. 🎜🎜0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. 🎜🎜Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren. 🎜

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

			@keyframes mymove {
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Nach dem Login kopieren

🎜🎜🎜🎜 (Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonWas sind die vier verwandten Eigenschaften der CSS3-Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!