CSS-cubic-bezier-generator

Wat is CSS-cubic-bezier-generator?

De CSS-cubic-bezier-generator is een gratis visuele editor voor de easing-functies die CSS-overgangen en -animaties gebruiken, gebouwd voor frontend-ontwikkelaars en motion-designers. In de cubic-bezier-modus sleep je twee controlepunten (of typ je ze) om een curve te vormen: de x-waarden blijven binnen het toegestane bereik 0–1, terwijl de y-waarden boven 1 of onder 0 kunnen gaan om overshoot en anticipatie te creëren. Een steps()-modus dekt getrapte timing met een instelbaar aantal stappen en een sprongterm — jump-start, jump-end, jump-none of jump-both, waarbij step-start en step-end steps(1, …) zijn. Een live-animatievoorvertoning speelt de huidige easing af op een vak dat beweegt en schaalt gedurende een duur die je instelt, je kunt elke preset als spookcurve overheen leggen om te vergelijken, en een bestaande cubic-bezier()- of steps()-string importeren. Kopieer de exacte declaratie voor je transition-timing-function of animation-timing-function.

CSS-cubic-bezier-generator gebruiken

1. Kies bovenaan de cubic-bezier()- of steps()-modus, of open Instellingen om te beginnen met een preset zoals ease, ease-in-out of linear.
2. Sleep in de cubic-bezier-modus de twee grepen op de grafiek of typ exacte x1-, y1-, x2- en y2-waarden; duw y boven 1 voor overshoot.
3. Stel in de steps()-modus het aantal stappen in en kies een sprongterm (jump-start, jump-end, jump-none of jump-both) om de trap te tekenen.
4. Druk op Afspelen om de live-animatie op het bewegende, schalende vak te laten lopen, en pas de duur in seconden aan om de timing te voelen.
5. Kies een vergelijkingscurve in Instellingen om een preset als spook op dezelfde grafiek te leggen, of plak een waarde in Importeren en pas hem toe.
6. Kopieer de gegenereerde cubic-bezier()- of steps()-waarde naar 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.34, y1 1.56, x2 0.64, y2 1

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

steps-modus, N 4, jump-end

steps(4, jump-end)

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.

Waar is de steps()-modus voor?

steps() springt tussen een vast aantal waarden in plaats van vloeiend te interpoleren — handig voor sprite-animaties, tikkende tellers of frame-voor-frame-effecten. Stel het aantal stappen en een sprongterm in: jump-start, jump-end, jump-none of jump-both. step-start is gelijk aan steps(1, jump-start) en step-end aan steps(1, jump-end).

Hoe werkt de live-animatievoorvertoning?

Druk op Afspelen en het vak beweegt over de baan en schaalt met je huidige easing, heen en weer herhalend. Verander de duur in seconden om het te vertragen of te versnellen; het gebruikt pure CSS-animatie met je cubic-bezier()- of steps()-waarde als timingfunctie.

Kan ik een bestaande easing-waarde importeren?

Ja. Plak een cubic-bezier(...)- of steps(...)-waarde — of een sleutelwoord zoals ease-in-out, step-start of step-end — in het veld Importeren en pas hem toe; de editor ontleedt hem terug naar de controlepunten of stapinstellingen.

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.