Wie kann ich CSS-Übergangskürzel für mehrere Eigenschaften effizient verwenden?

CSS-Übergangskurzschrift für mehrere Eigenschaften

In CSS können Sie mit der Übergangskurzschrift mehrere Übergangseigenschaften in einer einzigen Deklaration kombinieren. Wenn Sie es jedoch mit mehreren Eigenschaften verwenden, ist es wichtig, die richtige Syntax einzuhalten.

Syntax

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

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

Einzelne Übergänge kombinieren

Um einzelne Übergänge zu kombinieren, verwenden Sie Folgendes Syntax:

-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

Alternativ können Sie alle Eigenschaften gleichzeitig umstellen:

-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 .5s;
}

In diesem Beispiel werden sowohl Höhe als auch Deckkraft über 0,5 hinausgehen Sekunden, aber der Deckkraftübergang verzögert sich um weitere 0,5 Sekunden.

Kompatibilität

Übergangskurzschrift wird in modernen Browsern weitgehend unterstützt. Ausführliche Kompatibilitätsinformationen finden Sie unter http://caniuse.com/css-transitions.

Fazit

Die CSS-Übergangskurzschrift vereinfacht die Deklaration mehrerer Übergänge und ermöglicht Ihnen die Steuerung der CSS-Animation Immobilien effizienter. Denken Sie daran, die richtige Syntax einzuhalten und Präfixe für die browserübergreifende Kompatibilität zu verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Übergangskürzel für mehrere Eigenschaften effizient verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!