So verwenden Sie Übergangsanimationen in CSS3

Wir wissen, dass es in CSS3 ein Übergangsattribut gibt, das die Implementierung von Animationen auf CSS-Ebene ermöglicht. Es verwendet weder setInterval() noch timer, sondern das zugrunde liegende C++ rendert Die Qualität und Glätte der gerenderten Animation sind denen von JS und jQuery weit überlegen. Werfen wir heute einen Blick auf die spezifische Verwendung dieses Übergangsattributs.

Um unsere traditionelle Denkweise bei der Erstellung von Webseitenanimationen zu untergraben, werden auf den heutigen mobilen Seiten absolut keine Animationen durch setInterval() fertiggestellt, sondern alle durch einen Übergang implementiert.

Syntax: Übergang: Eigenschaftsdauer Timing-Funktionsverzögerung; Die Zeiteinheit ist: Sekunden (s).

transition-property gibt den Namen der CSS-Eigenschaft an, Transition effect none. Wenn kein Attribut vorhanden ist, wird der transition effect erhalten.

Alle Attribute erhalten Übergangseffekte.

property definiert eine Liste von CSS-Eigenschaftsnamen, die Übergangseffekte anwenden. Die Liste ist durch Kommas getrennt.

Übergangsdauer Geben Sie an, wie viele Sekunden oder Millisekunden der Übergangseffekt zum Abschluss benötigt. Geben Sie die Zeit (in Sekunden oder Millisekunden) an, die zum Abschluss des Übergangseffekts benötigt wird.

Der Standardwert ist 0, was bedeutet, dass er keine Auswirkung hat.

Übergangszeitfunktion

Geben Sie die Geschwindigkeitskurve des Übergangseffekts an

linearer Übergangseffekt, der mit der gleichen Geschwindigkeit beginnt und endet (gleich kubisch-bezier(0 ,0,1 ,1)).

ease beginnt langsam, wird dann schneller und endet dann langsam (kubisch-bezier(0,25,0,1,0,25,1)).

Einfacher Übergangseffekt, der mit langsamer Geschwindigkeit beginnt (entspricht Kubikbezier(0,42,0,1,1)).

ease-out-Übergangseffekt, der mit einer langsamen Geschwindigkeit endet (entspricht Kubikbezier(0,0,0,58,1)).

Ease-in-out-Übergangseffekt, der mit langsamer Geschwindigkeit beginnt und endet (entspricht Kubikbezier(0,42,0,0,58,1)).

Cubic-Bezier(n,n,n,n) definiert seinen eigenen Wert in der Kubik-Bezier-Funktion. Mögliche Werte liegen zwischen 0 und 1.

Übergangsverzögerung definiert, wann der Übergangseffekt beginnt. Geben Sie die Anzahl der Sekunden oder Millisekunden an, die gewartet werden soll, bevor der Übergangseffekt beginnt.

Fast alle CSS-Attribute können übergehen.

JQuery-Übergang

Hintergrundfarbe

Hintergrundposition

Hintergrundbild

Jede Verformungstransformation kann einen Übergang durchführen

Auslösebedingungen für die Übergangsanimation

Jede Änderung im CSS löst den Übergang aus. Zum Beispiel: Hover, Kategorien hinzufügen und entfernen oder einfach CSS direkt festlegen.

document.getElementById("box").style.width = "300px";

Die Änderung des Klassennamens löst eine Übergangsanimation aus:

document.getElementById( "box ").className = "long";

Besonderer Hinweis: Übergang kann nicht vererbt werden.

Es gibt so viele Möglichkeiten, das Übergangsattribut zu verwenden. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Welche neuen Hintergrundattribute gibt es in CSS3

Verwendung CSS3-Medienanfrage

So erstellen Sie eine flexible Box in CSS3

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