Hvordan opretter jeg en brugerdefineret cubic-bezier-easingkurve til CSS?

Træk i de to kontrolpunktshåndtag på grafen, indtast eksakte x1-, y1-, x2-, y2-værdier, eller vælg en forudindstilling. Vælg derefter CSS under Outputformat og klik på Kopiér for at få cubic-bezier()-værdien til transition-timing-function.

Hvordan laver jeg en bounce- eller overshoot-effekt med cubic-bezier?

Træk et håndtag over eller under boksen, så dets Y-værdi går forbi 0-1. Y kan overskride dette interval, mens X forbliver mellem 0 og 1. Forudindstillingerne back-out og anticipate er klar-til-brug overshoot-udgangspunkter.

Kan jeg få easing til Tailwind, Framer Motion eller anime.js?

Ja. Fanerne for outputformat er CSS, Tailwind, Framer Motion og anime.js. De formaterer alle de samme fire tal, så vælg en fane og klik på Kopiér for at lægge kodestykket i din udklipsholder.

Hvordan indlæser jeg en eksisterende cubic-bezier-værdi for at redigere den?

Indsæt en værdi som cubic-bezier(.17, .67, .83, .67) i importfeltet og klik på Indlæs. Hvis fire tal ikke kan læses, får du en fejlmeddelelse. Kurven gemmes også i sidens URL efter hash-tegnet, så den kan deles.

Hvorfor føles forhåndsvisningen langsommere end mine rigtige overgange?

Bevægelsesforhåndsvisning bruger en Varighedsindstilling, du kan ændre, og standardindstillingerne er langsommere, så du kan studere kurven. Forkort Varigheden, og brug derefter Afspil igen for at se bevægelsen med den hastighed, du planlægger at udgive.

Er det virkelig gratis?

Ja. Alle værktøjer er gratis at bruge, uden konto og uden kreditkort. Arbejdet foregår på din enhed i stedet for på vores servere, hvilket er det, der gør det gratis at køre.

Virker det på mobil?

Ja. Det kører i nuværende mobilbrowsere på iOS og Android, uden noget at installere.

📈

Gratis CSS Cubic-Bezier-easinggenerator

Design CSS-easingkurver ved at trække kontrolpunkter, forhåndsvis bevægelsen live og kopiér cubic-bezier()-værdien. Inkluderer overshoot/bounce-forudindstillinger.

Kører i din browserIngen tilmelding, ingen pop-upsIngen login krævetGratis for altid

Virker offline, når den er indlæst

Træk i teal- og rosa-håndtagene for at forme kurven

Kontrolpunkter

x1y1x2y2

Bevægelsesforhåndsvisning

Varighed1,6 s

Breddeovergang

CSS-værdi

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Forudindstillinger

De rosa og teal-håndtag kan trækkes over eller under boksen (Y uden for 0–1) for at skabe overskridnings-/spjæteffekter som back-out og anticipate. X forbliver inden for 0–1 (tid kan ikke gå baglæns).

Almindelige anvendelser

Brugerdefinerede CSS-overgangeDesign naturligt følende åftaleeffekter til hover-effekter, menuer og brugerfladeovergange.
Bounce og Overshoot-animationerOpret legende fjeder-/hoppekotion ved at trække kontrolpunkter forbi kassen.
Easing til @keyframes-animationerVælg den rigtige animation-timing-function til CSS-keyframe-animationer.
Easing-værdier til JS-animationsbibliotekerFå cubic-bezier-værdier til GSAP, Framer Motion, anime.js og mere.
Forstå, hvordan easing fungererSe forholdet mellem en bezier-kurve og den bevægelse, den producerer.

Sådan fungerer det

Editoren er bygget helt i browseren med React-state og SVG — intet bibliotek håndterer kurvematematikken. To trækbare kontrolpunkter definerer en kubisk Bezier-sti i SVG, og browserens egen CSS-animationsmotor kører bevægelsesforhåndsvisningen ved at indsætte den resulterende cubic-bezier()-værdi direkte i en @keyframes-regel.

1
Træk eller skriv kontrolpunkter
To håndtag (P1 i blågrøn, P2 i rosa) sidder på et SVG-lærred. Trækning bruger Pointer Events API med setPointerCapture, så håndtaget følger din finger eller markør, selv uden for SVG-området. Du kan også flytte håndtagene med piletasterne eller skrive præcise værdier i talfelterne x1/y1/x2/y2.
2
SVG tegner kurven i realtid
Kurven er et enkelt SVG <path>-element, hvis C-kommando (kubisk Bezier) genberegnes ud fra de fire kontrolpunktkoordinater ved hver opdatering. Intet canvas, intet eksternt bibliotek — browserens SVG-motor tegner stien direkte.
3
Browserens CSS-motor forhåndsviser easing
Tre live-animationer (en glidende prik, en breddeovergang og en skalering) kører CSS @keyframes med cubic-bezier()-værdien indsat inline. Browserens egen animationsmotor fortolker kurven, så det, du ser, er præcis det, din produktions-CSS vil give.
4
Kopiér kodestumpen i dit frameworks syntaks
Faner formaterer de samme fire tal som en CSS transition-timing-function, en Tailwind-klasse med vilkårlig værdi, et Framer Motion ease-array eller en anime.js easing-streng. Kodestumpen skrives til udklipsholderen med navigator.clipboard. Kurven kodes også i URL-hashen (#b=x1,y1,x2,y2), så du kan dele eller bogmærke den.