CSS Cubic Bezier-generator

Dra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.

Forhåndsinnstillinger
Kontrollpunkter
Første kontrollpunkt
Andre kontrollpunkt
Forhåndsvisning
din kurve
linear
Verdi
cubic-bezier(0.25, 0.1, 0.25, 1)
Dra i et håndtak eller velg en forhåndsinnstilling for å forme kurven.

Kurven tegnes direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hva betyr de to håndtakene og de fire tallene?

Kurven går fra nede til venstre (starten) til oppe til høyre (slutten), der tiden går fra venstre til høyre og fremdriften går oppover. De to håndtakene er kontrollpunktene som bøyer kurven — hver har en X- og en Y-verdi, slik at de til sammen utgjør cubic-bezier(x1, y1, x2, y2). X må være mellom 0 og 1, mens Y kan gå over toppen eller under bunnen for å få bevegelsen til å skyte over eller trekke seg tilbake før den faller til ro.

Hvordan bruker jeg verdien i CSS-koden min?

Kopier cubic-bezier() og lim den inn der du definerer en tidsfunksjon — transition-timing-function, animation-timing-function, eller i kortformen, f.eks. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Nøkkelordene ease, ease-in, ease-out og ease-in-out er bare faste cubic-bezier-kurver, så hvis du velger en av disse forhåndsinnstillingene, ser du den nøyaktige verdien bak nøkkelordet.

Kan den lage en sprett- eller elastisk effekt?

Ikke alene. En enkelt cubic-bezier kan lage en startbevegelse bakover og gå over målet (overshoot) — «back»-forhåndsinnstillingene drar et håndtak utenfor boksen for å gjøre nettopp det — men den kan bare bevege seg én vei og deretter falle til ro. Spretteffekter (bounce) og elastiske effekter endrer retning flere ganger, noe en enkelt cubic-bezier ikke kan uttrykke; til det trenger du CSS-keyframes eller linear()-funksjonen med mange stoppunkter.

Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.Border Radius-generatorRund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.