CSS kubisk Bezier-generator

Cubic Bezier-dokumentasjon

Hva er en kubisk 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);

Vanlige brukstilfeller

Animerte overganger:Lag jevne animasjoner for elementer som endrer egenskaper.
Rulleeffekter:Kontroller hastigheten på rulleanimasjoner.
Interaktive elementer:Definer hvordan elementer reagerer på brukerinteraksjoner som å holde musepekeren over eller klikke.
Bevegelsesdesign:Lag komplekse bevegelsessekvenser for grensesnittelementer.

Populære lettelsesfunksjoner

Ease (default)

Starter sakte, akselererer raskt og bremser deretter ned igjen.

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

Linear

Konstant hastighet fra start til slutt.

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

Ease-in

Starter sakte, og akselererer deretter.

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

Ease-out

Starter raskt, og bremser deretter ned.

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

Tips for å lage tilpassede kurver

Hold x-verdier mellom 0 og 1:Verdier utenfor dette området kan forårsake uventet virkemåte.
Visualiser kurven:Bruk den interaktive grafen til å forstå hvordan endringer påvirker animasjonen.
Test med ekte elementer:Forhåndsvis alltid kurven din med faktiske UI-komponenter for å sikre at den føles riktig.
Lagre forhåndsinnstillinger:Bokmerk nyttige kurver for fremtidige prosjekter.