So verwenden Sie den Übergang in CSS

Mit der Übergangseigenschaft in CSS können Sie die visuellen Effekte eines Elements steuern, das von einem Zustand in einen anderen übergeht. Verwendung: Geben Sie die Eigenschaft des Übergangs an (z. B. Farbe, Größe oder Position). Legen Sie die Dauer der Übergangsanimation fest (in Sekunden oder Millisekunden). Wählen Sie eine Beschleunigungsfunktion (steuert Geschwindigkeit und Beschleunigung). Legen Sie die Übergangsverzögerung fest (wie lange gewartet werden soll, bevor die Animation gestartet wird). Animation)

Übergänge in CSS verwenden

Mit der Übergangseigenschaft in CSS können Sie die visuellen Effekte eines Elements steuern, das von einem Zustand in einen anderen übergeht. Insbesondere bestimmt ein Übergang, wie lange ein Element damit verbringt, seine Eigenschaften zu ändern, die Art der Übergangsanimation (d. h. die Beschleunigungsfunktion) und die Verzögerung, die angewendet wird, wenn der Übergang abgeschlossen ist.

Verwendung

Um den Übergang in CSS zu verwenden, verwenden Sie die folgende Syntax:

<code class="css">transition: property duration timing-function delay;</code>

wobei:

• property: Die CSS-Eigenschaft, auf die der Übergangseffekt angewendet werden soll, z. B. Farbe, Größe oder Position.
• Dauer: Die Dauer der Übergangsanimation in Sekunden oder Millisekunden.
• Timing-Funktion: Beschreibt die Beschleunigungsfunktion der Übergangsanimation, die die Geschwindigkeit und Beschleunigung der Animation steuert.
• Verzögerung: Die Verzögerung, die angewendet werden soll, bevor die Übergangsanimation beginnt, in Sekunden oder Millisekunden.

Zum Beispiel erstellt der folgende Code eine Schaltfläche, die mit einer Übergangszeit von 1 Sekunde von Blau nach Rot wechselt und die Easing-Funktion „Ease-in-out“ verwendet:

<code class="css">button {
  background-color: blue;
  transition: background-color 1s ease-in-out;
}

button:hover {
  background-color: red;
}</code>

Easing-Funktion

Easing-Funktion angegebener Übergang Animationsgeschwindigkeit und Beschleunigung. CSS bietet eine Vielzahl vordefinierter Beschleunigungsfunktionen, darunter:

• linear: gleichmäßige Geschwindigkeit
• ease: startet langsam, beschleunigt dann
• ease-in: startet langsam
• ease-out: Langsames Ende
• ease-in-out: Kombinieren Sie „ease-in“ und „ease-out“

Sie können auch benutzerdefinierte Beschleunigungsfunktionen verwenden, um Effekte auf höherer Ebene zu erzeugen.

Verzögerung

Das Verzögerungsattribut steuert, wie lange ein Element wartet, bevor es seine Eigenschaften ändert. Dies kann verwendet werden, um Verzögerungseffekte zu erzeugen oder Übergänge zu mehreren Elementen zu synchronisieren.

Hinweise

• Übergänge gelten standardmäßig nur für deklarierte Attribute von Elementen.
• Ein Übergang kann mit dem Schlüsselwort all auf alle deklarierten Eigenschaften eines Elements angewendet werden.
• Browser unterstützen verschiedene Versionen des Übergangsattributs. Daher ist es wichtig, Ihren Code zu testen, um die browserübergreifende Kompatibilität sicherzustellen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Übergang in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!