CSS Cubic Bezier-generator

CSS-timingfunktioner og cubic-bezier()

I CSS-animationer og -transitioner bestemmer en timing-funktion, hvordan en egenskabs værdi ændrer sig over tid. I stedet for at en bevægelse altid foregår med en konstant, lineær hastighed, gør timing-funktioner det muligt at skabe acceleration og deceleration. Dette styres i CSS via egenskaberne transition-timing-function og animation-timing-function.

En af de mest kraftfulde måder at definere disse overgange på er ved at bruge funktionen cubic-bezier(x1, y1, x2, y2). Denne funktion tegner en kubisk Bezier-kurve, som definerer accelerationen. CSS Cubic Bezier-generator er et visuelt værktøj, der lader dig forme denne kurve manuelt og generere den præcise kode til dit stylesheet.

Kurvens opbygning og kontrolpunkter

En kubisk Bezier-kurve i CSS defineres af fire punkter. De to endepunkter er faste: starten af animationen er altid placeret i nederst venstre hjørne (koordinat 0, 0), og afslutningen er altid placeret i øverst højre hjørne (koordinat 1, 1). Kurven løber således fra nederst til venstre til øverst til højre. Tiden i animationen skrider frem fra venstre mod højre, mens animationens faktiske fremskridt bevæger sig opad.

Formen på kurven – og dermed hastigheden af animationen – styres af to uafhængige kontrolpunkter, som du kan manipulere i værktøjet:

• Første kontrolpunkt (x1, y1): Justerer kurvens form i starten af animationen.
• Andet kontrolpunkt (x2, y2): Justerer kurvens form i slutningen af animationen.

For at bevare en logisk tidslinje, hvor tiden ikke kan løbe baglæns, skal X-værdierne for begge kontrolpunkter altid ligge mellem 0 og 1. Y-værdierne har derimod friere rammer. De kan bevæge sig uden for standardområdet og gå under bunden (ned til -0.70) eller over toppen (op til 1.70). Dette gør det muligt at skabe effekter, hvor animationen trækker sig tilbage før start, eller skyder ud over sit slutmål, før den falder på plads.

Værktøjets funktioner og grænseværdier

Når du bruger generatoren, kan du justere kurven på flere måder for at opnå den ønskede effekt:

• Visuel redigering: Du kan trække direkte i de to håndtag for at ændre kurvens form. Mens du justerer kurven, viser en animation under "din kurve" en prik, der bevæger sig langs kurven, så du kan sammenligne effekten direkte med en prik, der bevæger sig med en jævn, lineær hastighed.
• Præcis numerisk indtastning: Du kan indtaste specifikke værdier for "Første kontrolpunkt" og "Andet kontrolpunkt". X-værdierne er begrænset til intervallet 0–1, mens Y-værdierne er begrænset til -0.70–1.70.
• Tastaturstyring: Hvis et kontrolpunkts håndtag er fokuseret, kan du trykke på venstre piltast for at finjustere værdien, hvilket eksempelvis ændrer en værdi til 0.99.
• Forudindstillinger: Under "Forudindstillinger" kan du vælge standard CSS-nøgleord som "ease", "ease-in", "ease-out" og "ease-in-out" for at se de præcise matematiske værdier bag dem. Du kan også vælge mere avancerede effekter som "Back In", "Back Out" og "Back In-Out". Forudindstillingen "Back Out" sætter eksempelvis værdien til cubic-bezier(0.34, 1.56, 0.64, 1).

Regler for inputfelter og fejlhåndtering

Generatoren har indbyggede regler for at sikre, at der altid genereres en gyldig CSS-værdi:

• Hvis du indtaster en værdi uden for grænserne, f.eks. 9 i feltet for første kontrolpunkts X-værdi, og derefter fjerner fokus fra feltet, vil værdien automatisk blive korrigeret til den maksimale tilladte værdi, som er 1.
• Hvis du tømmer et numerisk inputfelt helt og fjerner fokus, vil feltet automatisk gendanne den seneste gyldige værdi.
• Tomme eller ikke-numeriske input vil afvente en komplet og gyldig værdi, før kurven opdateres.
• Når du kopierer den færdige cubic-bezier()-værdi, vises statusmeddelelsen "Copied".

Begrænsninger ved cubic-bezier()

Selvom en kubisk Bezier-kurve giver stor frihed til at tilpasse acceleration og deceleration, har metoden fysiske begrænsninger. En enkelt cubic-bezier()-funktion kan godt lave en tilbagetrækning (hvor animationen starter med at gå lidt baglæns) og en overskridelse (hvor animationen skyder over målet til sidst). Den kan dog kun bevæge sig én vej og derefter falde til ro.

Det betyder, at en enkelt cubic-bezier() ikke kan bruges til at lave komplekse effekter, der skifter retning flere gange, såsom en hoppende bold (bounce) eller en elastisk svingning, der bouncer frem og tilbage. Til sådanne effekter må man i stedet benytte CSS-keyframes eller andre metoder.

Behandling af data

Når du designer dine easing-kurver, foregår alt arbejde lokalt på din computer. Kurven tegnes direkte i din browser, og intet af det, du indstiller her, uploades til BroBroGo.

---

Ofte stillede spørgsmål

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.