Sanfte Übergänge

Wenn du jetzt mit dem Mauszeiger auf den Button zeigst, ändert sich sein Hintergrund schlagartig. Es sieht weicher aus, wenn eine Farbe innerhalb eines kurzen Moments in die andere übergeht. In CSS heißt das Transition (Übergang). Der CSS-Kurs hat Transitions nicht behandelt, aber in Tailwind genügen zwei Klassen:

.transition-colors {
	transition-property: color, background-color, border-color /* and a few more */;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.duration-200 {
	transition-duration: 200ms;
}

Die Klasse transition-colors sagt dem Browser, welche Eigenschaften sich allmählich ändern sollen: die Farbe des Textes, des Hintergrunds, des Rahmens und ein paar weitere. transition-timing-function legt fest, wie die Änderung abläuft: Hier beschleunigt sie schnell und wird dann sanft langsamer, was natürlich aussieht. Und transition-duration bestimmt, wie lange die Änderung dauert: standardmäßig 150 Millisekunden (ms, tausendstel Sekunden).

Die Klasse duration-200 ändert die Dauer auf 200 ms. Andere Dauern funktionieren genauso: duration-100, duration-300, duration-500 und so weiter. Änderungen von 150 bis 300 ms wirken schnell, und man kann sie trotzdem noch sehen.

Die Klasse transition funktioniert wie transition-colors, umfasst aber auch andere Eigenschaften, zum Beispiel opacity und box-shadow (den Schatten). Wenn sich nur Farben ändern, genügt transition-colors.

Beachte, dass die Transition-Klassen keine Variante haben. Die Transition gehört zum Button selbst, sie läuft also immer, wenn sich der Hintergrund ändert: wenn der Mauszeiger ankommt und wenn er wieder geht. Mit hover:transition-colors würde die Farbe zwar einblenden, aber wenn der Mauszeiger wieder wegginge, würde sie sofort zurückspringen.