CSS-cubic-bezier-generator

Wat is CSS-cubic-bezier-generator?

De CSS-cubic-bezier-generator is een gratis visuele editor voor de cubic-bezier()-timingfunctie die CSS-overgangen en -animaties gebruiken, gebouwd voor frontend-ontwikkelaars en motion-designers. Kies een preset zoals ease, linear, ease-in, ease-out of ease-in-out, of stem de twee controlepunten zelf fijn af: de x-waarden worden beperkt tot het toegestane bereik 0–1, terwijl de y-waarden boven 1 of onder 0 kunnen gaan om overshoot en anticipatie te creëren. De voorvertoning tekent de curve op een eenheidsvierkant zodat je versnelling en vertraging in één oogopslag afleest, en de exacte declaratie cubic-bezier(x1, y1, x2, y2) wordt voor je gemaakt om te kopiëren. Gebruik hem wanneer een ingebouwd sleutelwoord te algemeen aanvoelt en je een vlottere, verende of bewustere beweging wilt.

CSS-cubic-bezier-generator gebruiken

1. Open Instellingen en kies een startpreset — ease, linear, ease-in, ease-out of ease-in-out — om de controlepunten in te stellen.
2. Sleep de twee ronde grepen op de curvevoorvertoning om de easing te hervormen, of typ exacte waarden in de velden x1, y1, x2 en y2.
3. Houd x1 en x2 tussen 0 en 1; duw y1 of y2 boven 1 of onder 0 om overshoot of anticipatie aan de beweging toe te voegen.
4. Lees de curve af tegen de gestippelde lineaire basislijn om te beoordelen hoe de easing versnelt en vertraagt.
5. Kopieer de gegenereerde cubic-bezier()-waarde en plak deze in je transition-timing-function of animation-timing-function.

Voorbeelden

x1 0.25, y1 0.1, x2 0.25, y2 1

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

x1 0, y1 0, x2 0.58, y2 1

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

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

Veelgestelde vragen

Wat betekenen de vier cubic-bezier-getallen?

Het zijn de coördinaten van de twee controlepunten: x1, y1 voor het eerste punt en x2, y2 voor het tweede. De curve begint altijd bij (0,0) en eindigt bij (1,1); de controlepunten buigen hem ertussenin, wat bepaalt hoe de geanimeerde eigenschap in de loop van de tijd versnelt en vertraagt.

Waarom kan ik x1 of x2 niet boven 1 zetten?

De CSS-specificatie vereist dat de x-coördinaten (tijd) van beide controlepunten tussen 0 en 1 blijven, zodat de timingfunctie een geldige afbeelding van voortgang naar uitvoer blijft. Deze tool beperkt de x-velden en de sleepgrepen automatisch tot dat bereik. De y-waarden mogen daarentegen boven 1 uitkomen of onder 0 zakken om overshoot of anticipatie te creëren.

Hoe maak ik een stuiterende of verende easing?

Duw een van de y-waarden boven 1 (voor overshoot aan het eind) of onder 0 (voor anticipatie aan het begin). Zo schiet cubic-bezier(0.34, 1.56, 0.64, 1) bijvoorbeeld door voordat hij tot rust komt, wat een veergevoel geeft zonder enige JavaScript.

Waar gebruik ik de gegenereerde waarde?

Plak hem als waarde van transition-timing-function of animation-timing-function — bijvoorbeeld transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Hij vervangt sleutelwoorden zoals ease of ease-in-out door je eigen curve.

Worden mijn gegevens naar een server gestuurd?

Nee. De hele editor draait in je browser met JavaScript — de controlepunten en de curve worden lokaal berekend en nooit geüpload, dus hij werkt privé en zelfs offline zodra de pagina is geladen.