De virkelige tallene bak CSS enkelt inn-ut
Design en tilpasset CSS cubic-bezier() timing-funksjon ved å dra to kontrollpunkter, forhåndsvise den live mot en lineær referanse, og kopier deretter klarverdien.
Resultat
Denne siden åpner cubic-bezier-generatoren med x1=0.42, y1=0, x2=0.58, y2=1 allerede lastet – de eksakte kontrollpunktene CSS-ease-in-out-søkeordet utvides til. Dra enten håndtaket eller rediger tallene direkte, og kurven, forhåndsvisningen av animasjonen og den kopierbare strengen oppdateres umiddelbart.
ease-in-out er ett av de fem innebygde CSS-timing-nøkkelordene, og det er populært nettopp fordi denne kurven akselererer forsiktig ut av starten, holder et ganske jevnt tempo gjennom midten og letter ned igjen før slutten – en form som er naturlig for de fleste UI-bevegelser. Å se det som eksplisitte kontrollpunkter i stedet for et nøkkelordnavn gjør det åpenbart hvorfor: y1 er nær 0 og y2 er nær 1, begge nær matchende x, så det er ingen overskridelse i noen av retningene.
Bruk disse fire tallene som et utgangspunkt i stedet for selve nøkkelordet når du trenger å dytte følelsen litt – trekk x1 ned for en raskere start, eller skyv y2 over 1 for å gjøre den samme formen til en forsiktig oversving. Hver endring oppdaterer forhåndsvisningen og den kopierbare cubic-bezier()-linjen umiddelbart.