CSS kubisk Bezier-generator

Bezier-dokumentation

Hvad er en Cubic Bezier-kurve?

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-syntaks

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

Almindelige brugstilfælde

Animerede overgange:Opret jævne animationer til elementer, der ændrer egenskaber.
Rulleeffekter:Styr hastigheden af rulleanimationer.
Interaktive elementer:Definer, hvordan elementer reagerer på brugerinteraktioner som at holde markøren eller klikke.
Bevægelsesdesign:Lav komplekse bevægelsessekvenser til UI-elementer.

Populære lempelsesfunktioner

Ease (default)

Starter langsomt, accelererer hurtigt og sænker derefter farten igen.

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

Linear

Konstant hastighed fra start til slut.

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

Ease-in

Starter langsomt og accelererer derefter.

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

Ease-out

Starter hurtigt, derefter bremser.

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

Tip til oprettelse af brugerdefinerede kurver

Bevar x-værdier mellem 0 og 1:Værdier uden for dette interval kan forårsage uventet adfærd.
Visualiser kurven:Brug den interaktive graf til at forstå, hvordan ændringer påvirker animationen.
Test med rigtige elementer:Se altid din kurve med faktiske UI-komponenter for at sikre,
Gem forudindstillinger:Bogmærk nyttige kurver til fremtidige projekter.