Wie verwende ich die CSS-Übergangskurzschrift für mehrere Eigenschaften richtig?

CSS-Übergang mit mehreren Eigenschaften: Erläuterung der Kurzschriftsyntax

Die CSS-Übergangskurzsyntax ermöglicht uns den gleichzeitigen Übergang mehrerer Eigenschaften. Die im angegebenen Beispiel angegebene Syntax ist jedoch falsch.

Kurzschriftsyntaxstruktur:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Hinweis: Die Dauer muss vor dem stehen Verzögerung, wenn die Verzögerung angegeben ist.

Korrekte Kurzschriftsyntax für das Gegebene Beispiel:

transition: height 0.5s, opacity 0.5s 0.5s;

Diese Syntax gibt an, dass:

• Die Eigenschaft „Höhe“ wechselt über 0,5 Sekunden.
• Die Eigenschaft „Deckkraft“ wechselt über 0,5 Sekunden. mit einer Verzögerung von 0,5 Sekunden.

Vereinfacht Syntax:

Wenn Sie alle Eigenschaften gleichzeitig übertragen, können Sie die folgende vereinfachte Kurzsyntax verwenden:

transition: all 0.5s;

Codebeispiel mit korrekter Syntax:

.element {
  transition: height 0.5s, opacity 0.5s 0.5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

Dieser aktualisierte Code sollte nun die Höhe und Deckkraft des Elements reibungslos übergehen.

Das obige ist der detaillierte Inhalt vonWie verwende ich die CSS-Übergangskurzschrift für mehrere Eigenschaften richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!