De echte cijfers achter CSS-gemakkelijk in-uit
Ontwerp een aangepaste CSS-cubic-bezier()-timingfunctie door twee controlepunten te slepen, een live voorbeeld ervan te bekijken tegen een lineaire referentie en vervolgens de gereedwaarde te kopiëren.
Resultaat
Deze pagina opent de kubieke-bezier-generator met x1=0,42, y1=0, x2=0,58, y2=1 al geladen - de exacte controlepunten waarnaar het CSS-zoekwoord 'easy-in-out' uitbreidt. Versleep een handgreep of bewerk de getallen rechtstreeks, en de curve, het animatievoorbeeld en de kopieerbare tekenreeks worden allemaal onmiddellijk bijgewerkt.
easy-in-out is een van de vijf ingebouwde CSS-timing-trefwoorden, en het is juist populair omdat deze curve vanaf het begin zachtjes versnelt, een redelijk gelijkmatig tempo door het midden aanhoudt en voor het einde weer afneemt - een vorm die voor de meeste UI-bewegingen als natuurlijk aanvoelt. Als je het als expliciete controlepunten ziet in plaats van als een trefwoordnaam, wordt het duidelijk waarom: y1 in de buurt van 0 zit en y2 in de buurt van 1, beide dicht bij hun overeenkomende x, dus er is geen overschrijding in beide richtingen.
Gebruik deze vier cijfers als uitgangspunt in plaats van het trefwoord zelf wanneer u het gevoel een klein duwtje wilt geven: trek x1 naar beneden voor een vlottere start, of druk y2 boven de 1 om dezelfde vorm in een zachte overshoot te veranderen. Elke wijziging werkt het voorbeeld en de kopieerbare cubische-bezier() regel onmiddellijk bij.