CSS-Übergänge erklärt

Die einfachste (und einfachste) Möglichkeit, Ihre Komponenten zu animieren, sind CSS-Übergänge. In diesem Artikel erfahren Sie, wie CSS-Übergänge funktionieren und wie Sie damit Animationen erstellen.

Ein Übergang tritt auf, wenn sich eine CSS-Eigenschaft über einen bestimmten Zeitraum von einem Wert zu einem anderen Wert ändert.

Sie können CSS-Übergänge mit der transitionEigenschaft erstellen :

.selector { transition: property duration transition-timing-function delay; }

Die transitionEigenschaft ist eine Abkürzung von vier CSS - Eigenschaften, transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition property is the shorthand for the above four properties */ transition: property duration timing-function delay; }

transition-propertybezieht sich auf die CSS-Eigenschaft, die Sie übergehen möchten. Es ist in der transitionKurzform erforderlich .

transition-durationbezieht sich auf die Dauer des Übergangs. Wie lange soll der Übergang dauern? Dieser Wert wird in Sekunden mit dem sSuffix (like 3s) geschrieben. Es ist auch in der transitionKurzform erforderlich .

transition-timing-functionbezieht sich auf den Übergang. Mehr dazu erfahren Sie später.

transition-delaybezieht sich darauf, wie lange Sie warten möchten, bevor Sie mit der Dauer beginnen. Dieser Wert wird in Sekunden mit dem sSuffix (like 3s) geschrieben. transition-delayist in der transitionKurzform optional .

Übergänge auslösen

Sie können CSS-Übergänge direkt mit Pseudoklassen wie :hover(wird aktiviert, wenn die Maus über ein Element fährt), :focus(Aktiviert, wenn ein Benutzer auf ein Element tippt oder wenn ein Benutzer auf ein Eingabeelement klickt) oder :active(Aktiviert, wenn der Benutzer auf das Element klickt ) auslösen ).

/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; }

Sie können CSS-Übergänge auch über JavaScript auslösen, indem Sie eine Klasse hinzufügen oder entfernen.

/* CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } // JavaScript const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Übergangs-Timing-Funktion verstehen

Das transition-timing-functionregelt, wie ein Übergang stattfindet. Alle Übergänge haben linearstandardmäßig den Wert von, was bedeutet, dass sich die Eigenschaft bis zum Ende des Übergangs gleichmäßig ändert.

.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

Die Sache ist, wenige Dinge bewegen sich linear im Leben. So bewegen sich echte Objekte nicht. Manchmal beschleunigen wir; manchmal bremsen wir ab. Mit transition-timing-functionkönnen Sie all das erfassen.

Stellen Sie sich vor, Sie werfen einen Tennisball auf ein offenes Feld. Der Ball verlässt Ihre Hand mit der maximalen Geschwindigkeit. Wenn es sich bewegt, verliert es Energie, verlangsamt sich und kommt schließlich zum Stillstand. Dies nennt man ease-out. Es gibt eine Timing-Funktion dafür.

.selector { transition-timing-function: ease-out; }

Stellen Sie sich vor, Sie sitzen in einem Auto. Es bewegt sich gerade nicht. Wenn Sie das Auto bewegen, beschleunigt es und erreicht seine Höchstgeschwindigkeit. Dies nennt man ease-in. Es gibt auch eine Timing-Funktion dafür.

.selector { transition-timing-function: ease-in; }

Da Sie ease-inund haben ease-out, gibt es auch eine Timing-Funktion, die beide miteinander kombiniert ease-in-out. (Ich rate davon ab, ease-in-outin Ihren Übergängen zu verwenden, es sei denn, Ihre Übergänge dauern länger als eine Sekunde. Innerhalb einer Sekunde lässt sich nichts ein- und aussteigen. Es sieht einfach komisch aus.)

.selector { transition-timing-function: ease-in-out; }

In diesem Stift finden Sie eine Demo der Timing-Funktionen, die Sie bisher gelernt haben:

Wenn Ihnen eine der oben genannten Optionen nicht gefällt, können Sie mit Ihre eigene Timing-Funktion erstellen cubic-bezier.

Erstellen Sie Ihre eigene Timing-Funktion mit Cubic-Bezier

Ein Cubic-Bezier ist ein Satz von vier Werten, die Ihre Übergangszeitfunktion bestimmen. Es sieht aus wie das:

.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }

Mach dir keine Sorgen über das x1, y1,, x2und y2. Sie werden niemals Kubik-Bezier-Kurven erstellen, indem Sie selbst Zahlen schreiben (es sei denn, Sie wissen bereits, was sie bedeuten, und Sie optimieren Ihre Timing-Funktion für Perfektion).

Sie können sich auf die vertrauenswürdigen Entwicklertools von Chrome und Firefox verlassen, um Ihre Kurven zu erstellen. Um es zu verwenden, fügen Sie ein transition-timing-functionin ein Element ein, öffnen dann devtools und klicken auf die Timing-Funktion.

Siehe die Pen CSS Transition Timing-Funktionen von Zell Liew (@zellwk) auf CodePen.

Das eingehende Erstellen eigener Bezierkurven für Ihre Animationen ist für den heutigen Artikel nicht möglich. Weitere Informationen zu Kubik-Bezier-Kurven finden Sie unter „Grundlegendes zu CSS-Timing-Funktionen“ von Stephen Greig.

Übergang von zwei oder mehr Eigenschaften

Sie können zwei (oder mehr) CSS-Eigenschaften übergehen, indem Sie sie durch ein Komma in Ihrer transitionoder -Eigenschaft trennen transition-property.

Dasselbe können Sie auch mit Dauer, Timing-Funktionen und Verzögerungen tun. Wenn die Werte identisch sind, müssen Sie nur einen angeben.

.selector { transition: background-color 1s ease-out, color 1s ease-out; /* OR */ transition-property: background, color; transition-duration: 1s; transition-timing-function: ease-out; }

Sie könnten versucht sein, jede CSS-Eigenschaft mit zu wechseln all. Tu das niemals. Das ist schlecht für die Leistung. Geben Sie immer die Eigenschaft an, die Sie übergehen möchten.

/* DON'T EVER DO THIS */ .selector { transition-property: all; } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; }

Übergang rein gegen Übergang raus

Manchmal möchten Sie, dass die Eigenschaften unterschiedlich ein- und ausgehen. Sie möchten, dass Dauer, Timing-Funktion oder Verzögerung unterschiedlich sind.

Dazu schreiben Sie einen weiteren Satz von transition-Eigenschaften.

.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; transition-duration: 2s; }

Wenn Sie Übergangseigenschaften in die auslösende (Pseudo-) Klasse schreiben, überschreiben die Übergangseigenschaften in der auslösenden Klasse die ursprünglichen Übergangseigenschaften, die Sie in der Basisklasse angegeben haben.

Wenn Sie im obigen Beispiel mit der Maus über die Schaltfläche fahren, dauert es 2 Sekunden, bis die Hintergrundfarbe von #33ae74zu wechselt #1ce.

Wenn Sie mit der Maus über die Schaltfläche fahren, dauert es nur 0,5 Sekunden, bis die Hintergrundfarbe wiederhergestellt ist, #1ceda die transition-duration2 nicht mehr vorhanden ist.

Einpacken

CSS-Übergänge sind der einfachste Weg, um Animationen durchzuführen. Sie können Übergänge entweder mit der transitionKurzform oder mit transition-Eigenschaften erstellen .

Um einen Übergang zu erstellen, überschreiben Sie eine Eigenschaft in einer Klasse (oder Pseudo-Klasse) und geben die Eigenschaft an, die in transitionoder übertragen werden soll transition-property.

Denken Sie daran, Ihre zu ändern, transition-timing-functiondamit Ihre Animation realer aussieht!

Wenn Sie diesen Artikel geliebt haben, werden Sie es lieben, JavaScript zu lernen - ein Kurs, in dem Sie lernen , echte Komponenten mit JavaScript von Grund auf neu zu erstellen .

(Oh, übrigens, wenn Ihnen dieser Artikel gefallen hat, würde ich es begrüßen, wenn Sie ihn teilen könnten.)

Ursprünglich auf zellwk.com veröffentlicht.