CSS Transition Generator
Configure CSS transitions with hover preview.
Transizione 1
Passa il cursore
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}Informazioni su questo strumento
Il Generatore di Transizioni CSS configura la proprieta abbreviata transition impostando la proprieta target, la durata, la funzione di timing e il ritardo. L'anteprima interattiva mostra il comportamento prima di copiare il codice.
Le transizioni CSS creano cambi di stato fluidi tra due valori CSS, attivate da pseudo-classi come :hover, :focus o cambi di classe via JavaScript.
Come usare
- Seleziona la proprieta CSS da animare (o usa all).
- Imposta la durata — quanto dura la transizione (es: 0.3s).
- Scegli una funzione di timing per controllare la curva di accelerazione.
- Aggiungi facoltativamente un ritardo prima dell'inizio della transizione.
- Passa il cursore sulla casella di anteprima per vedere l'effetto live, poi copia il CSS.
Casi d'uso
Gli sviluppatori usano le transizioni per gli effetti hover sui pulsanti, lo zoom delle card e i cambi di colore nei link di navigazione. I designer di form le usano per gli stili di focus.
Domande frequenti
- Qual e la differenza tra transition e animation? — Le transizioni reagiscono a un cambio di stato (come hover); le animazioni si eseguono automaticamente o in loop usando keyframes.
- Posso animare piu proprieta? — Si. Clicca su "Aggiungi transizione" per aggiungere piu regole di proprieta separate da virgola.
- Quali proprieta possono essere animate? — La maggior parte delle proprieta con valori numerici: opacity, color, transform, dimensioni, ecc. Proprieta come display non possono essere animate.