CSS3 verwendet die Übergangseigenschaft, um Übergangseffekte zu erzielen

Detaillierte Beschreibung der Eigenschaften

Der Zweck des Übergangsattributs besteht darin, einige CSS-Eigenschaften (z. B. den Hintergrund) mit einem sanften Übergangseffekt erscheinen zu lassen. Es handelt sich um ein kombiniertes Attribut, das sich aus den folgenden vier Attributen zusammensetzt:

• Übergangseigenschaft: Legt die CSS-Eigenschaft fest, die den Übergang anwendet, z. B. Hintergrund.
• Übergangsdauer: Legt die Dauer des Übergangseffekts fest. Der Standardwert ist 0.
• Übergangs-Timing-Funktion: Legen Sie die Zeitkurve des Übergangseffekts fest. Der Standardwert ist „Ease“.
• Übergangsverzögerung: Gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0.

Beispiel:

 Taste{
    Übergang: Hintergrund 1s;
    -webkit-transition: Hintergrund 1s; /* Safari */
 }

Beim Definieren von Übergangseigenschaften sind Übergangseigenschaft und Übergangsdauer erforderlich, die anderen beiden sind optional.

Übergangseigenschaft und Übergangsdauer

Mit der Übergangseigenschaft werden die CSS-Eigenschaften zum Anwenden von Übergangseffekten angegeben. Zu diesen Eigenschaften gehören (möglicherweise nicht vollständig):

• Breite
• Höhe
• Farbe
• Hintergrund (Farbe, Bild, Position)
• transformieren (im nächsten Beitrag)
• Rahmen (Farbe, Breite)
• Position (oben, unten, links, rechts)
• Text (Größe, Stärke, Schatten, Wortabstand)
• Marge
• Polsterung
• Opazität
• Sichtweite
• Z-Index
• alle

Mit der Eigenschaft „Übergangsdauer“ wird die Dauer des Übergangseffekts der angegebenen Eigenschaft festgelegt. Sie kann Sekunden (s) oder Millisekunden (ms) betragen.

Übergangsverzögerung und Übergangszeitfunktion

Mit transition-delay wird die Zeit eingestellt, zu der der Übergangseffekt beginnt. Der Standardwert ist 0 und kann Sekunden (s) oder Millisekunden (ms) betragen. Wenn die Übergangsverzögerung eine negative Zahl ist, bedeutet dies, dass der Übergangseffekt früher beginnt.

Mit der Übergangszeitfunktion werden die Übergangseffekte festgelegt. Dazu gehören:

• Leichtigkeit - langsam am Anfang, schnell in der Mitte und langsam am Ende
• ease-in - Langsam rein und schnell raus
• Ease-Out – Ease-Out-Effekt, schnell rein und langsam raus.
• Ease-In-Out - langsamer Start und langsames Ende
• cubic-bezier(n,n,n,n) – Definieren Sie Ihre eigenen Werte in der cubic-bezier-Funktion. Mögliche Werte liegen zwischen 0 und 1.

Beispiel:

 Taste{
   Übergang: Hintergrund 1 s, Ein- und Ausblenden 2 s;
   -webkit-transition: Hintergrund 1 s, Ein-Aus 2 s; /* Safari */
 }

Mehrere Attribute

Bei mehreren Eigenschaften werden die Auswirkungen der einzelnen Eigenschaften durch Kommas getrennt:

  Taste{
     Übergang: Hintergrund 1 s, Ein-/Ausblenden 2 s, Breite 2 s linear;
     -webkit-transition: Hintergrund 1 s, Ein-/Ausblenden 2 s, Breite 2 s linear; /* Safari */
   }

Kompatibilität

Internet Explorer 10, Firefox, Opera und Chrome unterstützen die Übergangseigenschaft.

Safari unterstützt die alternative Eigenschaft -webkit-transition.

Internet Explorer 9 und frühere Versionen unterstützen die Übergangseigenschaft nicht.

auslösen

Es ist zu beachten, dass Übergangseffekte zuvor definierte Eigenschaften erfordern und Übergangseffekte durch Auslöser wie :hover, :focus und :active angewendet werden.

Zusammenfassen

Oben habe ich Ihnen die Verwendung des Übergangsattributs in CSS3 zum Erzielen von Übergangseffekten vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!