Transition & Timing-Function Builder
Wähle Properties, Dauer und Timing. Passe Farben an, editiere die cubic-bezier-Kurve per Drag, spiele Presets ab und kopiere den CSS-Code.
Eigenschaften
Timing
Farben & Styles
Textfarbe (Normal / Active)
Background (Normal / Active)
Shadow (Normal / Active)
Hinweis: Shadow-Deckkraft ist im Code fix (0.35 / 0.45); passe das nach Bedarf an.
Timing-Function
cubic-bezier (P1.x, P1.y, P2.x, P2.y)
Kurvenvorschau (Drag die Punkte)
X/Y sind relativ (0–1), Drag erlaubt −1..2 (über/unter die Box).
Animation Presets
CSS Ausgabe
/* wird generiert */Hover / Play
Hover über das Element oder „Abspielen“ drücken. Drag die Punkte im Bezier-Editor.