Corsi on-line

Gestire la durata delle transizioni in CSS3

La durata delle transizioni può essere gestita tramite la proprietà transition-duration di CSS3, essa infatti si comporta come una sorta di funzione per il timing che accetta come argomento un valore numerico espresso in secondi (rappresentati dal simbolo s). Sostanzialmente, con il termine transizione viene indicato il completamento di un passaggio di stato per una specifica componente di pagina.

css3Un semplice esempio della proprietà citata potrebbe essere il seguente, dove la durata della transizione viene impostata su una durata pari a 2 secondi:

.blahblah {
    transition-duration: 2s;
}

Per quanto riguarda il valore passato alla proprietà, esso potrà essere espresso anche in millisecondi, inoltre, sarà possibile utilizzare come argomento una lista di valori separati da una virgola nel caso in cui si vogliano applicare impostazioni multiple ad un medesimo elemento; il valore predefinito della proprietà è pari a 0s.

Sostanzialmente il valore di default esclude il verificarsi di una transizione e il passaggio di stato dell’elemento coinvolto avverrà nell’immediato, ciò anche in presenza di altre proprietà in grado di influenzare le transizioni; chiaramente, non è consentito l’utilizzo di valori negativi, mentre sono accettati i numeri decimali.

Attualmente la proprietà transition-duration è supportata da Internet Explorer 10, Firefox, Opera e Google Chrome; per quanto riguarda Safari sarà necessario l’utilizzo del prefisso -webkit-:

.blahblah {
    transition-duration: 3s;
    -webkit-transition-duration: 3s; /* in Safari */
}

Come riportato nel manuale ufficiale del W3C (World Wide Web Consortium), la stessa proprietà non è invece supportata da Internet Explorer 9 o versioni precedenti del browser della Casa di Redmond.

Post correlati
I più letti del mese
Tematiche