6XC

CSS Transition-Generator

Erstellen Sie eine Transition — Eigenschaft, Dauer, Zeitfunktion und Verzögerung — und testen Sie sie live mit einem Klick.

907 Aufrufe

Die Eigenschaft transition

Syntax: transition: Eigenschaft Dauer Zeitfunktion Verzögerung. Sie animiert Änderungen, die durch Hover, Fokus oder Klassenwechsel ausgelöst werden. Die Zeitfunktion bestimmt das Gefühl: ease ist der natürliche Standard, ease-out eignet sich für Einblendungen, und benutzerdefinierte cubic-bezier-Kurven erzeugen federnde Überschwinger. Drücken Sie die Test-Schaltfläche, um Ihre Einstellungen in Aktion zu sehen.

Häufig gestellte Fragen

Welche Eigenschaften sind günstig zu animieren?

transform und opacity — der Browser kann sie auf der GPU zusammensetzen, ohne das Layout neu zu berechnen. Die Animation von width, height oder top erzwingt bei jedem Frame ein Layout und kann ruckeln.

Was ist eine gute Standarddauer?

150-250 ms für kleines UI-Feedback (Buttons, Hover) und 300-500 ms für größere Bewegungen. Über ~700 ms wirken Oberflächen träge.

Ähnliche Tools

CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellen CSS-Box-Shadow-Generator Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau. Erstellen CSS Border-Radius-Generator Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS. Erstellen CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellen