Generatore di transizione CSS

Il CSS Transition Generator è un editor visivo per la proprietà di transizione CSS Si sceglie quale proprietà animare, impostare la durata, scegliere una funzione di temporizzazione e aggiungere un ritardo, quindi attivare un'anteprima live per guardare l'esatto alleggerimento prima di copiare la dichiarazione È possibile sovrapporre diverse transizioni in un'unica abbreviazione - ad esempio l'opacità di dissolvenza durante lo spostamento di una trasformazione - e ogni livello ottiene la propria proprietà, durata, tempistica e ritardo.

Una transizione dice al browser di animare la modifica tra due valori di una proprietà anziché passare istantaneamente Cambiare un colore di sfondo al passaggio del mouse senza transizione e scatta; aggiungi transizione: il colore di sfondo si attenua di 200 m e la stessa modifica si attenua per un quinto di secondo La transizione vive sullo stato base, non sullo stato di passaggio del mouse, quindi l'elemento anima sia dentro che fuori dal cambiamento, che è ciò che fa sembrare un'interazione terminata piuttosto che brusca sulla via del ritorno.

Tutto accade nel tuo browser Inizia da un preset come Fade, Button hover o Bounce, regola i cursori e seleziona, premi il trigger di anteprima per vedere il movimento e copia la stenografia Lo strumento scrive le quattro parti nell'ordine richiesto dalle specifiche - proprietà, durata, funzione di temporizzazione, ritardo - e omette il ritardo quando è zero Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

Il singolo errore più comune è cercare di effettuare la transizione di una proprietà che non ha valori intermedi Visualizzazione: nessuno da visualizzare: il blocco non può animare, perché il display non è una proprietà animabile - non c'è una metà tra nessuno e blocco - motivo per cui salta una dissolvenza integrata sul solo display Il fix è quello di passare insieme opacità e visibilità, o di utilizzare il comportamento più recente consenti-discreto Vale anche la pena animare la trasformazione e l'opacità in preferenza a larghezza, altezza, in alto o a sinistra: i primi due sono compositi sulla GPU e non attivano il layout, quindi rimangono lisci, mentre l'animazione delle proprietà del layout ricalcola la pagina su ogni fotogramma ed è la solita fonte di transizioni stravaganti e balbettanti.