CSS Cubic Bezier Generator
Sleep de twee hendels om een easingcurve te ontwerpen, zie hoe een stip de curve volgt ten opzichte van een constante snelheid en kopieer de cubic-bezier()-waarde.
cubic-bezier(0.25, 0.1, 0.25, 1)De curve wordt direct in je browser getekend. Niets van wat je hier instelt, wordt geüpload naar BroBroGo.
Veelgestelde vragen
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, bijv. 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.