Vai al contenuto
TextArray1.87.0
100% locale

Generatore di transizioni e easing CSS

Crea una regola di transizione CSS da curve preimpostate o punti cubic-bezier personalizzati, con un grafico di testo del movimento.

11
Uscita
Strumenti correlati
Generatore CSS clamp()Strumenti per sviluppatori
Generatore di box-shadow CSSStrumenti per sviluppatori
Convertitore di unità CSSStrumenti per sviluppatori
Differenza chiave i18nStrumenti per sviluppatori
Convertitore da TOML a JSONStrumenti per sviluppatori
SQL in JSONStrumenti per sviluppatori
Generatore di transizioni e easing CSS
Scegli le proprietà che desideri animare, imposta una durata e un ritardo, e questo strumento genera la regola di transizione per te — come CSS semplice o come blocco di configurazione Tailwind che puoi incollare direttamente in tailwind.config.js. Copre le curve nominate comuni (linear, ease, ease-in, ease-out, ease-in-out) più ease-out-back, una curva che supera il suo obiettivo prima di stabilizzarsi, che non è una parola chiave CSS nativa e deve sempre essere scritta come cubic-bezier().
Sotto la regola generata, un grafico di testo traccia la progressione della curva ad ogni punto nel tempo — da 0 all'inizio dell'animazione a 1 alla fine, con una barra per ogni campione in modo da vedere l'accelerazione e qualsiasi superamento senza aprire gli strumenti di sviluppo. Passa a "Custom cubic-bezier()" e inserisci i tuoi quattro punti di controllo per visualizzare in anteprima una curva che qualcuno ti ha passato, o una che hai copiato da uno strumento di progettazione; il primo e il terzo punto devono restare tra 0–1 sull'asse del tempo (è un requisito CSS), ma i valori y possono stare fuori da 0–1, il che è esattamente come funzionano le animazioni bounce e back.
Il campo proprietà accetta un elenco separato da virgole — transform, opacity, background-color, o una proprietà CSS personalizzata come --panel-width — e lo strumento scrive una riga per proprietà in modo che la regola sia facile da leggere. Durata e ritardo sono in millisecondi; il numero di righe del grafico è regolabile da 2 a 41 per una lettura più grossolana o più fine della curva.
Tutto viene eseguito localmente nel tuo browser: niente di quello che inserisci viene inviato da nessuna parte. Copia il risultato, scaricalo come file .txt, o rinvia l'output direttamente all'input per continuare ad aggiustarlo.
FAQ
Cosa fa effettivamente "ease-out-back"?
Supera brevemente il valore finale prima di stabilizzarsi — utile per una scheda che diventa leggermente più grande prima di atterrare alla sua dimensione finale. Poiché non è una parola chiave CSS incorporata, il generatore la scrive sempre come una funzione cubic-bezier() completa.
Perché la curva personalizzata blocca i miei valori x ma non i miei valori y?
La specifica CSS richiede che i due punti di controllo x di una cubic-bezier() rimangono tra 0 e 1 in modo che il tempo avanzi sempre; i punti di controllo y sono liberi di stare fuori da quell'intervallo, il che è esattamente ciò che produce gli effetti di superamento e rimbalzo.
Cosa significano i numeri nel grafico?
Ogni riga è un campione nel tempo, da t=0 (inizio dell'animazione) a t=1 (fine dell'animazione), con il valore di output della curva in quel momento e una barra dimensionata in base ad esso — quindi una riga con un valore superiore a 1 o inferiore a 0 mostra che la curva supera il suo obiettivo.
Posso usare l'output di Tailwind direttamente?
Sì. È un blocco theme.extend pronto da incollare in tailwind.config.js, con la durata, il ritardo, l'elenco delle proprietà e la timing function ciascuno sotto una chiave "custom" che puoi rinominare per adattarsi ai tuoi token di progettazione.
Il mio CSS è caricato da qualche parte?
No. La regola di transizione e il grafico della curva vengono entrambi generati interamente nel tuo browser — niente di quello che inserisci qui viene inviato a un server.