Heim > Artikel > Web-Frontend > Was sind die vier verwandten Eigenschaften der CSS3-Animation?

Was sind die vier verwandten Eigenschaften der CSS3-Animation?

青灯夜游Original: 2022-01-17 16:02:282164Durchsuche

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.

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>

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

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：So ermitteln Sie den heutigen Wochentag mit JavaScriptNächster Artikel：So ermitteln Sie den heutigen Wochentag mit JavaScript

In Verbindung stehende Artikel

Mehr sehen