De echte cijfers achter CSS ease-in-out
Ontwerp je eigen CSS cubic-bezier()-timingfunctie door twee controlepunten te verslepen, bekijk de beweging live tegen een lineaire referentie en kopieer vervolgens de bruikbare waarde.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de cubic-bezier-generator met x1=0.42, y1=0, x2=0.58, y2=1 al geladen — de exacte controlepunten waar het CSS-keyword ease-in-out naar uitklapt. Versleep een handvat of bewerk de cijfers direct en de curve, de animatievoorvertoning en de kopieerbare waarde updaten meteen.
ease-in-out is een van de vijf ingebouwde CSS-timingkeywords en juist geliefd omdat deze curve zacht versnelt vanuit het begin, een redelijk gelijkmatig tempo aanhoudt in het midden en weer afremt voor het einde — een vorm die natuurlijk aanvoelt voor de meeste UI-bewegingen. Als je hem als expliciete controlepunten ziet in plaats van als keyword-naam, wordt duidelijk waarom: y1 zit dicht bij 0 en y2 dicht bij 1, beide dicht bij hun bijbehorende x, dus er is geen overshoot in welke richting dan ook.
Gebruik deze vier getallen als startpunt in plaats van het keyword zelf wanneer je het gevoel subtiel wilt bijstellen — trek x1 naar beneden voor een vlottere start, of duw y2 boven de 1 om van dezelfde vorm een lichte overshoot te maken. Elke wijziging werkt de voorvertoning en de kopieerbare cubic-bezier()-regel direct bij.