CSS kubieke Bezier-generator

Cubic Bezier-documentatie

Wat is een kubieke 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-syntaxis

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

Veelvoorkomende gebruiksscenario's

Geanimeerde overgangen:Maak vloeiende animaties voor elementen die eigenschappen wijzigen.
Scroll effecten:Bepaal de snelheid van scrollanimaties.
Interactieve elementen:Definieer hoe elementen reageren op gebruikersinteracties zoals zweven of klikken.
Motie ontwerp:Maak complexe bewegingssequenties voor UI-elementen.

Populaire versoepelingsfuncties

Ease (default)

Begint langzaam, accelereert snel en vertraagt dan weer.

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

Linear

Constante snelheid van begin tot eind.

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

Ease-in

Begint langzaam en versnelt dan.

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

Ease-out

Start snel en vertraagt dan.

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

Tips voor het maken van aangepaste curven

Houd x-waarden tussen 0 en 1:Waarden buiten dit bereik kunnen onverwacht gedrag veroorzaken.
Visualiseer de curve:Gebruik de interactieve grafiek om inzicht te krijgen in de invloed van wijzigingen op de animatie.
Test met echte elementen:Bekijk altijd een voorbeeld van uw curve met de werkelijke UI-componenten om er zeker van te zijn dat deze goed aanvoelt.
Voorinstellingen opslaan:Maak een bladwijzer van nuttige curves voor toekomstige projecten.