Kontrolpunkter

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Populære lempelsesforudindstillinger

CSS-output

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

Preview

Duration: 500ms

Bezier-kurvevisualisering Cubic

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

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

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

Related Tools

Sass til CSS konverter

Omdan din Sass-kode til CSS. Hurtigt, nemt og sikkert.

CSS til LESS-konverter

Omdan din CSS-kode til LESS med variabler, indlejring og meget mere. Hurtigt, nemt og sikkert.

Less til CSS Konverter

Omdan din Less-kode til CSS. Hurtigt, nemt og sikkert.

JavaScript-minimer

Komprimer og optimer din JavaScript-kode med professionel minifikation. Reducer filstørrelsen, forbedr indlæsningstiderne og øg ydeevnen for dine webprogrammer.

HSV til Pantone

Konverter HSV-farvekoder til Pantone-referencer® til printdesign

Storage Density Unit Converter

Konverter mellem forskellige enheder af datalagringstæthed med præcision