6XC

Generatore di Transition CSS

Crea una transition — proprietà, durata, funzione di temporizzazione e ritardo — e testala dal vivo con un clic.

908 visualizzazioni

La Proprietà transition

Sintassi: transition: proprietà durata funzione-di-temporizzazione ritardo. Anima i cambiamenti attivati da hover, focus o cambio di classe. La funzione di temporizzazione definisce la sensazione: ease è il valore predefinito naturale, ease-out è adatto per le entrate, e curve cubic-bezier personalizzate creano effetti elastici di overshoot. Premi il pulsante di test per vedere le tue impostazioni in azione.

Domande Frequenti

Quali proprietà sono economiche da animare?

transform e opacity — il browser può comporle sulla GPU senza ricalcolare il layout. Animare width, height o top forza un layout a ogni fotogramma e può causare scatti.

Qual è una buona durata predefinita?

150-250 ms per piccoli feedback dell'interfaccia (pulsanti, hover) e 300-500 ms per movimenti più ampi. Sopra i ~700 ms le interfacce iniziano a sembrare lente.

Strumenti Simili

Generatore di Gradienti CSS Progetta gradienti CSS lineari, radiali e conici con anteprima dal vivo e copia il codice. Genera Generatore di Ombre CSS (Box Shadow) Progetta una box-shadow visivamente — offset, sfocatura, espansione, colore, opacità e inset — con anteprima dal vivo. Genera Generatore di Border Radius CSS Arrotonda ogni angolo singolarmente o tutti insieme, in px o %, con anteprima dal vivo e CSS copiabile. Genera Generatore di Ombra del Testo CSS Progetta un text-shadow con offset, sfocatura, colore e opacità — anteprima dal vivo su testo di esempio. Genera