Vertiefende Kenntnisse zur Verwendung von Übergängen in CSS3

Animationen können derzeit auf CSS-Ebene implementiert werden, anstatt setInterval() oder timer zu verwenden. Die Qualität und Glätte der gerenderten Animation ist weitaus besser als bei JS und jQuery.

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. In den nächsten 2 bis 3 Jahren wird dies auch auf der PC-Seite der Fall sein, und die Funktionen setInterval () und animate werden im Übergang entfernt.

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

transition-property gibt den Namen der CSS-Eigenschaft an und der Übergangseffekt ist „None“. Wenn kein Attribut vorhanden ist, wird der Übergangseffekt erhalten. all Alle Eigenschaften erhalten den Übergangseffekt. property definiert eine durch Kommas getrennte Liste von CSS-Eigenschaftsnamen, die den Übergangseffekt anwenden. Übergangsdauer Gibt 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 es keine Auswirkung gibt.

transition-timing-function gibt die Geschwindigkeitskurve des Übergangseffekts an

linearer Übergangseffekt, der mit der gleichen Geschwindigkeit beginnt und endet (gleich kubisch-bezier(0,0,1,1). )).
Die Leichtigkeit beginnt langsam, wird dann schneller und endet dann langsam (Kubik-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 langsamer 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 Kubikbezier-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 Umschalteffekt beginnt.

Welche Attribute können am Übergang beteiligt sein?

Fast alle CSS-Eigenschaften können umgestellt werden.
JQuery-Übergang
Hintergrundfarbe
Hintergrundposition
Hintergrundbild
Jede Verformungstransformation kann einen Übergang durchführen

Was sind die Auslösebedingungen für die Übergangsanimation?

Jede Änderung an CSS löst einen Übergang aus. Zum Beispiel: Hover, Addition und Subtraktion oder einfach CSS direkt festlegen.
Zum Beispiel:
Das direkte Festlegen von CSS löst eine Übergangsanimation aus:

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

Das Ändern des Klassennamens löst eine Übergangsanimation aus:

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

Besonderer Hinweis: Der Übergang kann nicht vererbt werden.

Das obige ist der detaillierte Inhalt vonVertiefende Kenntnisse zur Verwendung von Übergängen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!