Der Unterschied zwischen Übergang und Transformation in CSS-CSS-Tutorial-php.cn

Der Unterschied zwischen Übergang und Transformation in CSS

王林

Freigeben： 2024-02-18 19:46:19

Original

1502 Leute haben es durchsucht

Der Unterschied zwischen Übergang und Transformation in CSS

Übergang und Transformation in CSS sind beides Eigenschaften, die zum Erzielen von Animationseffekten verwendet werden, ihre Funktionen und Verwendungsmethoden sind jedoch unterschiedlich.

Das Übergangsattribut wird verwendet, um den Übergangseffekt von Elementen während der Änderung von CSS-Attributen anzugeben. Durch das Übergangsattribut können wir dafür sorgen, dass sich die Attribute des Elements reibungslos vom Anfangszustand in den Endzustand ändern, anstatt sich plötzlich zu ändern. Die Syntax des Übergangs lautet wie folgt:

transition: property duration timing-function delay;

Nach dem Login kopieren

Unter diesen stellt die Eigenschaft die zu übertragende CSS-Eigenschaft dar, bei der es sich um eine einzelne Eigenschaft oder mehrere durch Kommas getrennte Eigenschaften handeln kann. Die Dauer stellt die Dauer des Übergangs in Sekunden oder Millisekunden dar. Timing-Funktion stellt die Timing-Funktion des Übergangseffekts dar, mit der die Geschwindigkeitskurve des Übergangs gesteuert wird. Die Standardeinstellung ist Leichtigkeit. Verzögerung stellt die Verzögerungszeit dar, bevor der Übergang beginnt.

Hier ist ein Beispiel für die Verwendung des Übergangs:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease;
}

.box:hover {
  width: 200px;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Nach dem Login kopieren

Wenn sich im obigen Beispiel die Maus über dem .box-Element bewegt, wechselt die Breite reibungslos von 100 Pixel auf 200 Pixel.

Das Transformationsattribut wird verwendet, um Verformungsoperationen an Elementen durchzuführen, wie z. B. Drehung, Skalierung, Verschiebung und Neigung usw. Mit dem Transformationsattribut können Sie das Erscheinungsbild eines Elements ändern, ohne das Dokumentlayout zu ändern. Die Syntax der Transformation lautet wie folgt:

transform: function(value);

Nach dem Login kopieren

Unter diesen stellt die Funktion die auszuführende Transformationsfunktion dar, bei der es sich um Drehung, Skalierung, Übersetzung oder Schrägstellung usw. handeln kann.

Hier ist ein Beispiel für die Verwendung von Transformation:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel wird das .box-Element um 45 Grad gedreht.

Zusammenfassend lässt sich sagen, dass das Übergangsattribut zur Steuerung des sanften Übergangseffekts von CSS-Attributen verwendet wird, während das Transformationsattribut zum Transformieren von Elementen verwendet wird. In praktischen Anwendungen werden beide häufig zusammen verwendet, um den Übergangseffekt des Transformationsattributs über das Übergangsattribut zu steuern und so komplexere Animationseffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen Übergang und Transformation in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!