Welche verwandten Eigenschaften hat die CSS3-Animation?-Front-End-Fragen und Antworten-php.cn

Welche verwandten Eigenschaften hat die CSS3-Animation?

青灯夜游

Freigeben： 2022-03-15 17:26:34

Original

3005 Leute haben es durchsucht

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

Welche verwandten Eigenschaften hat die CSS3-Animation?

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>

Nach dem Login kopieren

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!