Cubic-bezier editor

Zo gebruik je de cubic-bezier editor

1. Sleep de twee grepen in de grafiek. P1 (het eerste controlepunt) bepaalt het begin van de beweging, P2 het einde. De tijd loopt van links naar rechts en de voortgang van onder naar boven.
2. Of typ een waarde in Waarde cubic-bezier(): een volledige cubic-bezier(0.4, 0, 0.2, 1), vier getallen of een sleutelwoord zoals ease-in-out. Met de velden x1, y1, x2 en y2 bewerk je één coördinaat tegelijk.
3. Begin met het menu Voorinstellingen (CSS-sleutelwoorden, de families van sine tot back en de curves van Material Design) of met de knoppen voor de sleutelwoorden. Komt je curve overeen met een voorinstelling, dan verschijnt de naam naast de knoppen.
4. Bekijk het Animatievoorbeeld: de stip op Jouw curve en de stip op linear leggen dezelfde afstand af in dezelfde Duur. Gebruik Pauzeren/Afspelen en Opnieuw starten om ze te vergelijken.
5. Kopieer het resultaat uit CSS-timingfunctie, of kopieer de Benadering met linear() en kies het aantal Segmenten.

Toetsenbord: geef een greep de focus en verplaats hem met de pijltjestoetsen per 0,01, of per 0,1 met Shift.

Staat je systeem ingesteld op minder beweging, dan start de animatie gepauzeerd. Druk op Afspelen als je haar toch wilt zien.

Wat cubic-bezier() betekent

Een CSS-easingfunctie zet de verstreken tijd van een overgang (0 tot 1) om in de voortgang ervan (0 tot 1). cubic-bezier(x1, y1, x2, y2) beschrijft die omzetting met een kubische Bézier-curve die begint in (0, 0), eindigt in (1, 1) en wordt getrokken door twee controlepunten, P1 = (x1, y1) en P2 = (x2, y2).

• x-waarden zijn tijden en moeten tussen 0 en 1 blijven, anders zou de functie geen geldige timingcurve zijn. De editor houdt ze binnen dat bereik.
• y-waarden zijn voortgang en mogen onder 0 of boven 1 komen. Een y boven 1 laat de animatie voorbij haar doel schieten en terugkomen, zoals bij de Back-curves; onder 0 beweegt ze eerst achteruit.
• Een steile helling betekent een snelle beweging, een vlakke helling een langzame. ease-out begint snel en eindigt langzaam, wat natuurlijk aanvoelt voor elementen die het scherm binnenkomen. ease-in doet het omgekeerde en past bij elementen die vertrekken.

De CSS-sleutelwoorden zijn afkortingen: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) en linear = (0, 0, 1, 1).

De benadering met linear()

De nieuwere functie linear() geeft voortgangswaarden op gelijk verdeelde tijdstippen, bijvoorbeeld linear(0, 0.25, 0.5, 0.75, 1), en verbindt die met rechte lijnen. De tool samplet je curve (hij lost de Bézier op voor elke tijdstap) en schrijft die waarden met drie decimalen. Met 20 tot 40 segmenten is het resultaat visueel gelijk aan de curve. Het echte voordeel van linear() zit in curves die een Bézier niet kan tekenen, zoals stuiteren en veren, maar zo deel je ook één syntaxis. Het werkt in Chrome en Edge 113+, Firefox 112+ en Safari 17.2+, dus houd de waarde cubic-bezier() aan als terugvaloptie.