Cubic-Bézier-övergångsredigerare
Designa egna cubic-bezier-övergångskurvor med en dragbar redigerare och live-animationsförhandsvisning.
Dra i de två handtagen för att forma övergångskurvan.
transition-timing-function: —;
animation-timing-function: —;
Allt körs i din webbläsare – ingenting laddas upp.
Om Cubic-Bézier-övergångsredigerare
Redigeraren för kubisk Bézier-övertoning designar anpassade tidsfunktioner för CSS-övergångar och animationer. Dra de två kontrollhandtagen på kurvcanvasen så uppdateras värdet cubic-bezier(x1, y1, x2, y2) direkt; en animationsförhandsvisning spelar upp övertoningen bredvid en linjär referens så du kan känna skillnaden, med en justerbar varaktighet och omedelbar återuppspelning.
Tio förval täcker det vanliga vokabuläret — standard-ease, ease-in, ease-out och ease-in-out, plus expressiva kurvor som back och anticipate som skjuter förbi sina slutpunkter, och material-stilade acceleration- och retardationskurvor. Använd dem som de är eller som utgångspunkter att dra vidare till något eget.
Du kan också skriva in exakta koordinater för kontrollpunkter, klicka på slumpa för inspiration, och kopiera antingen det bara cubic-bezier()-värdet eller en färdig CSS-regel att klistra in. Hela redigeraren körs i din webbläsare.
Så använder du Cubic-Bézier-övergångsredigerare
- Dra de två handtagen på kurvredigeraren för att forma övertoningen.
- Klicka på Spela upp igen och jämför den övertonade animationen mot den linjära referensen, justera varaktigheten vid behov.
- Prova förvalen — ease, back, anticipate, material och mer — för en snabb utgångspunkt.
- Finjustera med de numeriska kontrollpunktsfälten för exakta värden.
- Kopiera cubic-bezier()-värdet eller det kompletta CSS-utdraget.