CSS Cubic Bezier Generator

Wat de CSS Cubic Bezier Generator doet

De CSS Cubic Bezier Generator is een visuele tool waarmee u een CSS-easingcurve kunt ontwerpen door simpelweg twee controlepunten te verslepen. Terwijl u de vorm van de curve aanpast, beweegt er een stip langs de curve om het easing-effect direct te demonstreren. Dit effect wordt getoond naast een andere stip die in een constant tempo beweegt, zodat u de snelheidsverschillen goed kunt vergelijken. Na het ontwerpen levert de tool de bijbehorende cubic-bezier()-waarde op, die u direct kunt kopiëren voor gebruik in uw CSS-code.

De invoeropties van de generator

U kunt de easingcurve op verschillende manieren vormgeven en aanpassen via de interface:

• Het verslepen van twee hendels: Met deze hendels (de controlepunten) bepaalt u handmatig de exacte vorm en het verloop van de easingcurve.
• Eerste controlepunt X: Een numerieke waarde die strikt tussen 0 en 1 moet liggen.
• Eerste controlepunt Y: Een numerieke waarde die kan variëren van -0.70 tot 1.70.
• Tweede controlepunt X: Een numerieke waarde die eveneens tussen 0 en 1 moet blijven.
• Tweede controlepunt Y: Een numerieke waarde die kan variëren van -0.70 tot 1.70.
• Preset-selectie: U kunt ook direct een vooraf gedefinieerde curve kiezen uit de opties "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out" of "Back In-Out".

De uitvoer van de tool

Wanneer u de curve aanpast, genereert de tool de volgende visuele en tekstuele resultaten:

• jouw curve: Dit is de visuele weergave van de easingcurve die u heeft ontworpen.
• cubic-bezier(x1, y1, x2, y2): De exacte CSS cubic-bezier()-functiewaarde die hoort bij de door u gevormde curve.
• Copied: Deze statusindicator verschijnt in beeld zodra u de gegenereerde cubic-bezier()-waarde succesvol heeft gekopieerd. Er is bij het kopiëren alleen een successtatus en geen expliciete foutmelding of afwijzingsprompt.

Regels, limieten en invoergedrag

Bij het ontwerpen van de curve gelden specifieke wiskundige regels en gedragingen binnen de interface:

• Richting van de curve: De curve loopt altijd van linksonder (het startpunt) naar rechtsboven (het eindpunt). Hierbij vordert de tijd van links naar rechts, en gaat de voortgang van de animatie omhoog.
• Bereik van de X-waarden: De X-waarden van de controlepunten zijn strikt gelimiteerd tot een bereik tussen 0 en 1.
• Bereik van de Y-waarden: De Y-waarden van de controlepunten mogen buiten het standaardvlak treden en kunnen tussen -0.70 en 1.70 liggen. Dit maakt het mogelijk om effecten te creëren waarbij de animatie doorschiet (overshoot) of juist eerst terugtrekt (pull-back).
• Automatische correctie bij focusverlies: Als u een ongeldige waarde invoert in een numeriek veld en vervolgens de focus verliest (bijvoorbeeld door buiten het veld te klikken), corrigeert de tool dit automatisch. Voert u bijvoorbeeld een 9 in bij "Eerste controlepunt X", dan verandert deze waarde na focusverlies in 1. Als u een numeriek invoerveld volledig leegmaakt en de focus verliest, wordt de voorgaande geldige waarde hersteld.
• Toetsenbordbesturing: Wanneer een hendel van een controlepunt gefocust is, kunt u de waarde handmatig aanpassen met de pijltoetsen. Als u bijvoorbeeld op de pijl-links drukt, verandert de waarde naar bijvoorbeeld 0.99.
• Incomplete invoer: Lege of niet-numerieke invoer in de velden activeert geen directe fout, maar de tool wacht simpelweg tot er weer een volledige en geldige waarde is ingevoerd.
• De "Back Out"-preset: Wanneer u kiest voor de preset "Back Out", worden de controlepunten automatisch ingesteld op de specifieke waarde cubic-bezier(0.34, 1.56, 0.64, 1).

Beperkingen van een enkele cubic-bezier

Hoewel de cubic-bezier()-functie zeer flexibel is, kent deze een belangrijke natuurlijke beperking. Een enkele cubic-bezier kan weliswaar anticiperen (een aanloop nemen) en doorschieten (overshoot), maar de beweging kan zich slechts in één richting bewegen en vervolgens stabiliseren. Het is met een enkele curve onmogelijk om animaties te maken die herhaaldelijk van richting veranderen, zoals een elastisch effect of een stuiterende beweging (bounce).

Privacy en gegevensverwerking

Uw privacy is volledig gewaarborgd tijdens het gebruik van deze generator. De curve wordt direct binnen uw eigen webbrowser getekend. Er worden geen gegevens of instellingen die u in de tool invoert geüpload naar de servers van BroBroGo.

Veelgestelde vragen (FAQ)

Wat betekenen de twee hendels en de vier getallen?

De curve loopt van linksonder (de start) naar rechtsboven (het einde), waarbij de tijd van links naar rechts loopt en de voortgang omhoog gaat. De twee hendels zijn de controlepunten die de curve buigen — elk heeft een X- en een Y-waarde, wat samen cubic-bezier(x1, y1, x2, y2) vormt. X blijft altijd tussen 0 en 1, terwijl Y boven de bovenkant of onder de onderkant kan gaan om de beweging te laten doorschieten of terug te trekken voordat deze stabiliseert.

Hoe gebruik ik de waarde in mijn CSS?

Kopieer de cubic-bezier() en plak deze overal waar een timing-functie wordt verwacht — zoals transition-timing-function, animation-timing-function, of de shorthand, bijvoorbeeld transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). De trefwoorden ease, ease-in, ease-out en ease-in-out zijn simpelweg vaste cubic-bezier-curves; als je een van deze presets kiest, zie je de exacte waarde achter de term.

Kan ik hiermee een stuiterend of elastisch effect maken?

Niet direct. Een enkele cubic-bezier kan wel een aanloop nemen en doorschieten — de "back"-presets trekken een hendel buiten het vak om precies dat te doen — maar kan alleen in één richting bewegen en dan stabiliseren. Stuiterende (bounce) of elastische effecten veranderen meerdere keren van richting, wat niet in een enkele cubic-bezier past; daarvoor heb je CSS-keyframes of de linear()-functie met meerdere stops nodig.