CSS Cubic Bezier-generator

Dra i de två handtagen för att forma en övergångskurva, se en punkt följa den bredvid en linjär rörelse och kopiera cubic-bezier()-värdet.

Förinställningar
Kontrollpunkter
Första kontrollpunkt
Andra kontrollpunkt
Förhandsvisning
din kurva
linear
Värde
cubic-bezier(0.25, 0.1, 0.25, 1)
Dra i ett handtag eller välj en förinställning för att forma kurvan.

Kurvan ritas direkt i din webbläsare. Inget av det du ställer in här laddas upp till BroBroGo.

Vanliga frågor

Vad betyder de två handtagen och de fyra siffrorna?

Kurvan löper från nere till vänster (starten) till uppe till höger (slutet), där tiden går från vänster till höger och förloppet går uppåt. De två handtagen är kontrollpunkterna som böjer den – varje punkt har ett X och ett Y, så tillsammans blir de cubic-bezier(x1, y1, x2, y2). X håller sig alltid mellan 0 och 1, medan Y kan gå över toppen eller under botten för att få rörelsen att skjuta över målet eller dras tillbaka innan den landar.

Hur använder jag värdet i min CSS?

Kopiera cubic-bezier() och klistra in det där du anger en tidsfunktion – transition-timing-function, animation-timing-function eller i kortformen, t.ex. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Nyckelorden ease, ease-in, ease-out och ease-in-out är bara fasta cubic-bezier-kurvor, så om du väljer en av de förinställningarna ser du det exakta värdet bakom nyckelordet.

Kan den skapa en studsande eller elastisk effekt?

Inte på egen hand. En enskild cubic-bezier kan förbereda rörelsen och skjuta över målet – "back"-förinställningarna drar ett handtag utanför boxen för att göra just det – men den kan bara röra sig åt ett håll och sedan landa. Studs (bounce) och elastiska effekter ändrar riktning flera gånger, vilket en enskild cubic-bezier inte kan uttrycka; för det behövs CSS-keyframes eller funktionen linear() med flera stopp.

Gradient-generatorBygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.Border Radius-generatorRunda varje hörn med reglage, skapa organiska former med det elliptiska läget och kopiera din CSS direkt.Flexbox-generatorSkapa en flex-container och dess objekt med visuella kontroller, se layouten reagera direkt och kopiera CSS-koden med ett klick.CSS Grid-generatorStäll in kolumner och rader, dra över cellerna för att placera ut objekt och kopiera CSS-koden med matchande HTML med ett klick.Box Shadow-generatorDra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.CSS clamp()-kalkylatorAnge en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.