Proprietà di transizione di stile
Esempio
Passa il mouse sopra un elemento div per cambiarne gradualmente l'aspetto:
document.getElementById("myDIV").style.transition = "all 2s";
Definizione e utilizzo
La proprietà di transizione è una proprietà abbreviata per le quattro proprietà di transizione:
transizioneProprietà,transizioneDurata,transizioneTimingFunction e transitionDelay.
Nota: specificare sempre la proprietà transitionDuration, altrimenti la durata è 0 e la transizione non avrà alcun effetto.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Sintassi
Restituisce la proprietà di transizione:
object.style.transition
Imposta la proprietà di transizione:
object.style.transition = "property duration timing-function delay|initial|inherit"
Valori di proprietà
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Dettagli tecnici
Valore di default: | tutti 0 facilitano 0 |
---|---|
Valore di ritorno: | Una stringa, che rappresenta la proprietà di transizione di un elemento |
Versione CSS | CSS3 |
Pagine correlate
Riferimento CSS: proprietà di transizione
❮ Oggetto stile