CSS Cubic Bezier Generator

Cubic Bezier Dokumentation

Vad är en Cubic Bezier Curve?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS-syntax

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Vanliga användningsfall

Animerade övergångar:Skapa smidiga animationer för element som ändrar egenskaper.
Rullningseffekter:Kontrollera hastigheten på rullningsanimeringar.
Interaktiva element:Definiera hur element svarar på användarinteraktioner, som att hålla muspekaren eller klicka.
Rörlig design:Skapa komplexa rörelsesekvenser för gränssnittselement.

Populära lättnadsfunktioner

Ease (default)

Startar långsamt, accelererar snabbt och saktar sedan ner igen.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Konstant hastighet från början till slut.

cubic-bezier(0, 0, 1, 1)

Ease-in

Startar långsamt och accelererar sedan.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Startar snabbt och bromsar sedan in.

cubic-bezier(0, 0, 0.58, 1)

Tips för att skapa anpassade kurvor

Håll x värden mellan 0 och 1:Värden utanför det här intervallet kan orsaka oväntat beteende.
Visualisera kurvan:Använd det interaktiva diagrammet för att förstå hur ändringarna påverkar animeringen.
Testa med riktiga element:Förhandsgranska alltid din kurva med faktiska UI-komponenter för att säkerställa att det känns rätt.
Spara förinställningar:Bokmärk användbara kurvor för framtida projekt.