Heim > Artikel > Web-Frontend > Welche verwandten Eigenschaften hat die CSS3-Animation?

Welche verwandten Eigenschaften hat die CSS3-Animation?

青灯夜游Original: 2022-01-12 17:27:572876Durchsuche

Animationsbezogene Attribute umfassen: Transformation, Transformationsursprung, Übergang, „@keyframes“, Animation, Animationsname, Animationsdauer, Animationsverzögerung usw.

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

css3 hat drei Animationen: Transformation, Übergang, Animation

1, Transformation (2D/3D-Konvertierungsattribut)

PerspektiveGeben Sie an, wie das 3D-Element in der Perspektive angezeigt wird.3Perspektive-Ursprung Definition Ob ein Das Element sollte sichtbar sein, wenn man nicht auf den Bildschirm blickt transition-propertyÜbergangsdauerÜbergangs-Timing-FunktionÜbergangsverzögerung

Eigenschaft	Beschreibung	CSS
transformieren	Geeignet für 2D- oder 3D-transformierte Elemente

Dieses Attribut ist Übergang – Kurzform für Eigenschaft, Übergangsdauer, Übergangszeitfunktion, Übergangsverzögerung.	3
Legen Sie die für den Übergang verwendete CSS-Eigenschaft fest.	3
Legen Sie die Zeitdauer für den Übergang fest.	3
Stellen Sie die Timing-Funktion für den Übergang ein.	3

Geben Sie den Zeitpunkt an, zu dem der Übergang beginnt.

3, Animation (Animationsattribut) Attribut @keyframesAnimationanimationsnameanimation definiert wird -DauerAnimations-Timing-Funktion


Beschreibung.	CSS
Definieren Sie eine Animation, den Namen der von definierten Animation @keyframes soll von Animationsname verwendet werden.	3
Zusammengesetzte Attribute. Ruft die auf das Objekt angewendeten Animationseffekte ab oder legt diese fest.	3
Ruft den auf das Objekt angewendeten Animationsnamen ab oder legt ihn fest. Er muss mit der Regel @keyframes verwendet werden, da der Animationsname durch @keyframes	3
Abruf Oder legen Sie die Dauer der Objektanimation fest	3

Übergangstyp der Objektanimation abrufen oder festlegen

AnimationsverzögerungAbrufen oder festlegen die Verzögerungszeit der Objektanimation in umgekehrter Reihenfolge in der SchleifeStatus der Objektanimation abrufen oder festlegenBeispiel:

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

			@keyframes mymove {
				50% {
					width: 150px;
					height: 150px;
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					width: 100px;
					height: 100px;
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

css Video-Tutorial

3		animation-play-state
3
	(Lernvideo-Sharing:	)

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

html5 css css3 count 循环 Property function 对象 transform transition @keyframes animation

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：33 sehr praktische einzeilige JavaScript-Codes, es wird empfohlen, sie zu sammeln!Nächster Artikel：33 sehr praktische einzeilige JavaScript-Codes, es wird empfohlen, sie zu sammeln!

In Verbindung stehende Artikel

Mehr sehen