CSS Animazioni con la proprietà di transizione


Esempio

Utile per animazioni semplici, la proprietà di transition CSS consente alle proprietà CSS basate su numero di animare tra stati.


Esempio

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Visualizza risultato

Per impostazione predefinita, passando con il mouse su un elemento con la classe .Example , l'altezza dell'elemento salta 120px a 120px e il colore di sfondo 120px rosso ( #ff0000 ).

Aggiungendo la proprietà di transition , è possibile che queste modifiche si verifichino nel tempo:

.Example{
    ...
    transition: all 400ms ease;
}

Visualizza risultato

Il valore all applica la transizione a tutte le proprietà compatibili (basate sui numeri). Qualsiasi nome struttura compatibile (ad esempio height o top ) può essere sostituito per questa parola chiave.

400ms specifica il tempo richiesto dalla transizione. In questo caso, il cambio di altezza dell'elemento richiederà 400 millisecondi.

Infine, la ease valore è la funzione di animazione, che determina come viene riprodotta l'animazione. ease significa iniziare lentamente, accelerare, quindi terminare lentamente. Altri valori sono linear , ease-out e ease-in .


Compatibilità tra browser

La proprietà di transition è generalmente ben supportata su tutti i principali browser, ad eccezione di IE 9. Per le versioni precedenti dei browser basati su Firefox e Webkit, utilizzare i prefissi dei fornitori in questo modo:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Nota: la proprietà di transition può animare le modifiche tra due valori numerici, indipendentemente dall'unità. Può anche transitare tra unità, come da 100px a 50vh . Tuttavia, non può transitare tra un numero e un valore predefinito o automatico, come la transizione dell'altezza di un elemento da 100px a auto .