Sări la conținut
TextArray1.87.0
Complet local

Generator de easing și tranziție CSS

Creați o regulă de tranziție CSS dintr-o curbă predefinită sau puncte cubic-bezier personalizate, cu un grafic text al mișcării.

11
Ieșire
Instrumente conexe
Generator CSS clamp()Instrumente pentru dezvoltatori
Generator de CSS box-shadowInstrumente pentru dezvoltatori
Convertor de unități CSSInstrumente pentru dezvoltatori
Diferența tastei i18nInstrumente pentru dezvoltatori
Convertor TOML în JSONInstrumente pentru dezvoltatori
SQL în JSONInstrumente pentru dezvoltatori
Generator de easing și tranziție CSS
Alegeți proprietățile pe care doriți să le animați, setați o durată și o întârziere, iar acest instrument vă va scrie regula de tranziție — ca CSS simplu sau ca un bloc de configurare Tailwind pe care îl puteți plasa direct în tailwind.config.js. Acoperă curbele denumite comune (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, o curbă care depășește valoarea finală înainte de a se stabiliza, care nu este un cuvânt-cheie CSS nativ și trebuie întotdeauna să fie scrisă ca cubic-bezier().
Sub regula generată, un grafic text trasează progresul curbei în fiecare punct din timp — de la 0 la începutul animației până la 1 la sfârșitul acesteia, cu o bară pentru fiecare eșantion, astfel încât să puteți vedea accelerația și orice depășire fără a deschide uneltele de dezvoltator. Comutați la "cubic-bezier() personalizat" și introduceți propriile patru puncte de control pentru a visualiza o curbă pe care ți-a dat-o cineva, sau una pe care ai copiat-o dintr-un instrument de design; primele și al treilea punct trebuie să rămână între 0–1 pe axa timpului (este o cerință CSS), dar valorile y pot merge dincolo de 0–1, ceea ce este exact modul în care funcționează efectele bounce și back.
Câmpul de proprietăți acceptă o listă separată prin virgulă — transform, opacity, background-color, sau o proprietate CSS personalizată ca --panel-width — și instrumentul scrie o linie pe proprietate, astfel încât regula să rămână ușor de citit. Durata și întârzierea sunt în milisecunde; numărul de rânduri ale graficului este ajustabil de la 2 la 41 pentru o citire mai aspră sau mai fină a curbei. Tot ceea ce ruleaza local în browserul dvs.: nimic din ceea ce introduceți nu este trimis nicăieri. Copiați rezultatul, descărcați-l ca fișier .txt sau trimiteți rezultatul înapoi la intrare pentru a continua să-l ajustați.
FAQ
Ce face de fapt "ease-out-back"?
Se depășește pe scurt valoarea finală înainte de a se stabiliza — util pentru un card care se mărește ușor înainte de a se aseza în dimensiunea finală. Deoarece nu este un cuvânt-cheie CSS nativ, generatorul o scrie întotdeauna ca o funcție cubic-bezier() completă.
De ce curba personalizată limitează valorile mele x dar nu valorile mele y?
Specificația CSS necesită ca cele două puncte de control x ale unui cubic-bezier() să rămână între 0 și 1, astfel încât timpul să se mute întotdeauna înainte; punctele de control y sunt libere să iasă din acel interval, ceea ce este exact modul în care funcționează efectele bounce și back.
Ce înseamnă numerele din grafic?
Fiecare rând este o mostră în timp, de la t=0 (început animație) la t=1 (sfârşit animație), cu valoarea de ieșire a curbei la acel moment și o bară dimensionată pentru aceasta — deci un rând cu o valoare mai mare de 1 sau mai mică de 0 arată curba depășind ținta.
Pot folosi ieșirea Tailwind direct?
Da. Este un bloc theme.extend gata de lipit în tailwind.config.js, cu durata, întârziere, lista de proprietăți și funcția de timing fiecare sub o cheie "custom" pe care o puteți redenumi pentru a se potrivi token-urilor de design.
CSS-ul meu este încărcat undeva?
Nu. Regula de tranziție și graficul curbei sunt ambele generate în întregime în browserul dvs. — nimic din ceea ce introduceți aici nu este trimis unui server.