Wie kann ich CSS-Kurzschrift verwenden, um mehrere Eigenschaften gleichzeitig zu überführen?

Mehrere CSS-Eigenschaften mit der Kurzschrift übergehen

In CSS bietet die Übergangseigenschaft eine praktische Kurzschrift für den gleichzeitigen Übergang mehrerer Eigenschaften. Dies kann Ihren Code vereinfachen und prägnanter machen. Um die Kurzschrift zu verwenden, befolgen Sie diese Syntax:

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

Beachten Sie, dass die Dauer vor der Verzögerung liegen muss, sofern angegeben.

Kurzschriftübergänge auf bestimmte Eigenschaften anwenden:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Alle Eigenschaften umstellen:

Sie können alle umstellen Eigenschaften mit der folgenden Abkürzung:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Beispiel:

Betrachten Sie das folgende Beispiel:

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

In diesem Beispiel wird die Show hinzugefügt Die Klasse bewirkt, dass die Höhe und Deckkraft des Elements schrittweise geändert wird.

Hinweis: Die Die Kompatibilität des Übergangs ist ausgezeichnet (über 94 % weltweit), sodass die Verwendung im Allgemeinen sicher ist. Wenn Sie Bedenken hinsichtlich der Kompatibilität haben, lesen Sie https://caniuse.com/css-transitions.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Kurzschrift verwenden, um mehrere Eigenschaften gleichzeitig zu überführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!