Detaillierte Erläuterung der CSS3Transition-Eigenschaft

Mit dem CSS3-Übergang können wir einen Übergangseffekt zwischen zwei verschiedenen CSS-Stilen erstellen. Mithilfe des Übergangsattributs können wir definieren, wie sich eine CSS-Eigenschaft von einem Wert in einen anderen umwandelt. Diese Änderung kann durch Mausereignisse (z. B. :hover), Tastendrücke usw. ausgelöst werden.

Grundlegende Verwendung des Übergangsattributs

In CSS3 wird das Übergangsattribut verwendet, um anzugeben, wie von einem CSS-Stil zu einem anderen übergegangen wird. Hier ist ein einfaches Beispiel für die Verwendung des Übergangsattributs:

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
}
div:hover{
  width: 150px;
}

Wenn im obigen Code die Maus über das div-Element bewegt wird, wechselt die Breite des div-Elements von 50 Pixel auf 150 Pixel und der Übergangseffekt hält 2 an Sekunden.

Detaillierte Syntax des Übergangsattributs

Die Syntax des Übergangsattributs lautet wie folgt:

transition: [property] [duration] [timing-function] [delay];

Wobei:

[Eigenschaft]: Name des Übergangs-CSS-Attributs, bei dem es sich um ein einzelnes Attribut oder mehrere durch Kommas getrennte Attribute handeln kann.

[Dauer]: Geben Sie die Dauer des Übergangs in Sekunden (s) oder Millisekunden (ms) an.

[Timing-Funktion]: Geben Sie die Zeitfunktion des Übergangs an, die „ease“, „linear“, „ease-in“, „ease-out“, „ease-in-out“ und „Cubic-Bezier()“ sein kann.

[Verzögerung]: Geben Sie die Verzögerungszeit an, bevor der Übergang ausgeführt wird, in Sekunden (s) oder Millisekunden (ms).

Basierend auf der obigen Syntax können wir über das Übergangsattribut komplexere Übergangseffekte definieren.

Der Wert des Übergangsattributs

Das Folgende sind die optionalen Werte und Standardwerte​​des Übergangsattributs:

[Eigenschaft]: CSS-Attributname, z. B. Höhe, Breite, Hintergrund- Farbe usw.

[Dauer]: Zeit, z. B. 1 s, 3,5 s, 500 ms usw., der Standardwert ist 0 s

[Timing-Funktion]: Zeitfunktion, z. B. linear, Ease, Easy-In, Ease-Out, Ease-In-Out, Kubikbezier, der Standardwert ist Ease.

[Verzögerung]: Zeit, z. B. 1 s, 3,5 s, 500 ms usw., der Standardwert ist 0 s.

Transition-Timing-Function-Attribut

Das Transition-Timing-Function-Attribut wird verwendet, um die Zeitfunktion des Übergangs anzugeben. Es bestimmt, wie CSS-Eigenschaftswerte reibungslos vom Startwert zum Endwert übergehen. Zu den gängigen Zeitfunktionen gehören:

linear: konstante Geschwindigkeitserleichterung, d. h. gleichmäßige Bewegung

ease: Standardwert. Langsam beginnen, in der Mitte schnell wechseln und am Ende wieder langsamer werden

ease-in: langsam beginnen

ease-out: langsam enden

ease-in-out: langsam beginnen und enden

cubic-bezier: benutzerdefinierte Zeitfunktion

Übergangsverzögerungsattribut

Das Übergangsverzögerungsattribut wird verwendet, um die Verzögerungszeit des Übergangseffekts anzugeben. Das heißt, wie lange der Übergangseffekt nach seiner Auslösung auf die Ausführung wartet. Wenn ein Verzögerungswert angegeben wird, beginnt die Ausführung des Übergangseffekts nach einer Verzögerung der angegebenen Zeit nach dem Auslösen.

Beispiele für Übergangsattribute

Hier einige Beispiele für Übergangsattribute:

Übergangsursprung

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
  transform-origin: top;
}
div:hover{
  width: 150px;
  transform: rotate(45deg);
}

Wenn sich im obigen Code die Maus über dem div-Element bewegt, wird die Breite des div-Elements von 50 Pixel in konvertiert 150 Pixel und der Übergangseffekt hält 2 Sekunden an. Gleichzeitig wird das div-Element um 45 Grad nach oben gedreht.

Mehrere Attribute

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
div:hover{
  width: 150px;
  height: 150px;
  background-color: blue;
}

Wenn sich im obigen Code die Maus über das div-Element bewegt, ändern sich gleichzeitig Breite, Höhe und Hintergrundfarbe des div-Elements und der Übergangseffekt hält 2 Sekunden an.

Benutzerdefinierte Zeitfunktion

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover{
  width: 150px;
}

Wenn sich im obigen Code die Maus über dem div-Element bewegt, wechselt die Breite des div-Elements von 50 Pixel auf 150 Pixel, und dieser Übergangseffekt hält 2 Sekunden an. Gleichzeitig haben wir mit „cubic-bezier()“ die Zeitfunktion angepasst, um den Übergangseffekt personalisierter zu gestalten.

Zusammenfassung

CSS3-Übergangseffekte sind sehr leistungsstark und verschiedene komplexe Übergangseffekte können über das Übergangsattribut definiert werden. Durch die Beherrschung der relevanten Übergangskenntnisse können wir Animationseffekte auf Webseiten farbenfroher gestalten.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS3Transition-Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!