Hoppa till innehåll
TextArray1.87.0
100% lokalt

CSS easing- och övergångsgenerator

Skapa en CSS-övergångsregel från en kurvförinställning eller anpassade cubic-bezier-punkter, med en textgraf över rörelsen.

11
Utmatning
Relaterade verktyg
CSS clamp()-generatorUtvecklarverktyg
CSS box-shadow-generatorUtvecklarverktyg
CSS-enhetsomvandlareUtvecklarverktyg
i18n nyckel diffUtvecklarverktyg
TOML till JSON-omvandlareUtvecklarverktyg
SQL till JSONUtvecklarverktyg
CSS easing- och övergångsgenerator
Välj de egenskaper du vill animera, ställ in en varaktighet och fördröjning, och detta verktyg skriver övergångsregeln åt dig — som vanlig CSS eller som ett Tailwind-konfigurationsblock som du kan klistra in i tailwind.config.js. Det täcker de vanliga namngivna kurvorna (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, en kurva som överstiger sitt mål innan den stabiliseras, vilket inte är ett inbyggt CSS-nyckelord och måste alltid skrivas ut som en fullständig cubic-bezier()-funktion.
Under den genererade regeln plottar en textgraf kurvans framsteg vid varje tidpunkt — från 0 vid början av animationen till 1 vid slutet, med en stapel för varje prov så att du kan se accelerationen och överskridningen utan att öppna utvecklingsverktygen. Växla till "Anpassad cubic-bezier()" och ange dina egna fyra kontrollpunkter för att förhandsgranska en kurva som någon gav dig, eller en som du kopierade från ett designverktyg. Den första och tredje punkten måste ligga mellan 0–1 på tidaxeln (det är ett CSS-krav), men y-värdena kan gå utanför 0–1, vilket är exakt hur bounce- och back-easings fungerar.
Egenskapsfältet accepterar en kommaavgränsad lista — transform, opacity, background-color, eller en anpassad CSS-egenskap som --panel-width — och verktyget skriver en rad per egenskap så regeln är lätt att skanna. Varaktighet och fördröjning är i millisekunder. Antalet diagramrader kan justeras från 2 upp till 41 för en grovare eller finare läsning av kurvan.
Allt körs lokalt i din webbläsare: inget du skriver skickas någonstans. Kopiera resultatet, ladda ned det som en .txt-fil, eller skicka utdata direkt tillbaka till inmatningen för att fortsätta justera den.
FAQ
Vad gör "ease-out-back" egentligen?
Det överskrider kort slutvärdet innan det återställer sig — användbart för ett kort som blir något större innan det landar på sin slutliga storlek. Eftersom det inte är ett inbyggt CSS-nyckelord, skriver generatorn det alltid som en fullständig cubic-bezier()-funktion.
Varför begränsar den anpassade kurvan mina x-värden men inte mina y-värden?
CSS-specifikationen kräver att de två x-kontrollpunkterna för en cubic-bezier() måste stanna mellan 0 och 1 så att tiden alltid går framåt. Y-kontrollpunkterna kan fritt gå utanför det intervallet, vilket är exakt hur överskridning och bounce-effekter fungerar.
Vad betyder siffrorna i grafen?
Varje rad är ett prov i tid, från t=0 (animationsstart) till t=1 (animationsslut), med kurvans utgångsvärde på det ögonblicket och en stapel som är dimensionerad för den — så en rad med ett värde över 1 eller under 0 visar kurvan som går förbi sitt mål.
Kan jag använda Tailwind-utdata direkt?
Ja. Det är ett klart-att-klistra-in theme.extend-block för tailwind.config.js, med varaktigheten, fördröjningen, egenskapslistan och timing-funktionen var och en under en "custom"-nyckel som du kan döpa om för att passa dina designtoken.
Laddas min CSS upp någonstans?
Nej. Övergångsregeln och kurvgrafen genereras båda helt i din webbläsare — ingenting du anger här skickas till en server.