CSS Transition Generator
Configure CSS transitions with hover preview.
Uebergang 1
Maus darueber
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}Über dieses Tool
Der CSS-Uebergangsgenerator konfiguriert die transition-Kurzschreibweise durch Festlegen von Zieleigenschaft, Dauer, Timing-Funktion und Verzoegerung. Die interaktive Vorschau zeigt das Uebergangsverhalten vor dem Kopieren des Codes.
CSS-Uebergaenge erstellen sanfte Zustandsaenderungen zwischen zwei CSS-Werten, ausgeloest durch Pseudoklassen wie :hover, :focus oder Klassenänderungen via JavaScript.
Anleitung
- Waehlen Sie die zu animierende CSS-Eigenschaft (oder verwenden Sie all).
- Legen Sie die Dauer fest — wie lange der Uebergang dauert (z.B. 0.3s).
- Waehlen Sie eine Timing-Funktion zur Steuerung der Beschleunigungskurve.
- Fuegen Sie optional eine Verzoegerung vor dem Start hinzu.
- Fahren Sie mit der Maus ueber die Vorschau, um den Effekt live zu sehen, und kopieren Sie das CSS.
Anwendungsfälle
Entwickler verwenden Uebergaenge fuer Schaltflaechen-Hover-Effekte, Karten-Skalierung und Farbaenderungen in Navigationslinks. Formdesigner verwenden sie fuer Eingabe-Fokus-Stile.
Häufige Fragen
- Was ist der Unterschied zwischen transition und animation? — Uebergaenge reagieren auf eine Zustandsaenderung (wie Hover); Animationen laufen automatisch oder in einer Schleife mit Keyframes.
- Kann ich mehrere Eigenschaften uebergehen? — Ja. Klicken Sie auf "Uebergang hinzufuegen", um mehrere kommagetrennte Eigenschaftsregeln hinzuzufuegen.
- Welche Eigenschaften koennen uebergehen? — Die meisten Eigenschaften mit numerischen Werten: opacity, color, transform, Abmessungen usw. Eigenschaften wie display koennen nicht uebergehen.