CSS Cubic Bezier-generator

Træk i de to håndtag for at forme en easing-kurve, se en prik bevæge sig langs den i forhold til en jævn bevægelse, og kopier cubic-bezier()-værdien.

Forudindstillinger
Kontrolpunkter
Første kontrolpunkt
Andet kontrolpunkt
Forhåndsvisning
din kurve
linear
Værdi
cubic-bezier(0.25, 0.1, 0.25, 1)
Træk i et håndtag eller vælg en forudindstilling for at forme kurven.

Kurven tegnes direkte i din browser. Intet af det, du indstiller her, uploades til BroBroGo.

FAQ

Hvad betyder de to håndtag og de fire tal?

Kurven løber fra nederst til venstre (starten) til øverst til højre (slutningen), hvor tiden går fra venstre mod højre, og fremskridtet går opad. De to håndtag er kontrolpunkterne, der bøjer kurven — hvert har et X og et Y, så de tilsammen udgør cubic-bezier(x1, y1, x2, y2). X forbliver mellem 0 og 1, mens Y kan gå over toppen eller under bunden for at få bevægelsen til at skyde over målet eller trække sig tilbage, før den falder til ro.

Hvordan bruger jeg værdien i min CSS?

Kopier cubic-bezier() og indsæt den der, hvor du angiver en timing-funktion — 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øgleordene ease, ease-in, ease-out og ease-in-out er blot faste cubic-bezier-kurver, så hvis du vælger en af disse forudindstillinger, ser du den nøjagtige værdi bag nøgleordet.

Kan den lave en bounce- eller elastisk effekt?

Ikke alene. En enkelt cubic-bezier kan lave tilbagetrækning og overskridelse — "back"-forudindstillingerne trækker et af håndtagene ud over boksen for at gøre netop det — men den kan kun bevæge sig én vej og derefter falde til ro. Bounce (boblende) og elastiske effekter skifter retning flere gange, hvilket en enkelt cubic-bezier ikke kan udtrykke; til det skal du bruge CSS-keyframes eller funktionen linear() med mange trin.

Gradient-generatorByg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.Border radius-generatorAfrund hvert hjørne med skydere, form organiske klatter med elliptisk tilstand, og kopier din CSS med det samme.Flexbox-generatorOpsæt en flex-container og dens elementer med visuelle kontroller, se layoutet reagere live, og kopier CSS-koden med ét klik.CSS Grid-generatorIndstil dine søjler og rækker, træk hen over cellerne for at placere elementer, og kopier grid-CSS med tilhørende HTML med ét klik.Box shadow-generatorTræk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.CSS clamp() BeregnerIndtast en størrelse til små og store skærme, og få en flydende clamp()-værdi, der skalerer jævnt derimellem — til skriftstørrelser, padding, marginer eller gaps.