Proprietà di transizione CSS
Esempio
Passa il mouse sopra un elemento <div> e modifica la larghezza con un effetto di transizione graduale:
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La transition-property
proprietà specifica il nome della proprietà CSS a cui si riferisce l'effetto di transizione (l'effetto di transizione inizierà quando la proprietà CSS specificata cambia).
Suggerimento: in genere si può verificare un effetto di transizione quando un utente passa il mouse sopra un elemento.
Nota: specificare sempre la proprietà della durata della transizione , altrimenti la durata è 0 e la transizione non avrà alcun effetto.
Valore di default: | tutto |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.transitionProperty="larghezza,altezza" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Sintassi CSS
transition-property: none|all|property|initial|inherit;
Valori di proprietà
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Passa il mouse su un elemento <div> e modifica la larghezza E l'altezza con un effetto di transizione graduale:
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
Pagine correlate
Tutorial CSS: Transizioni CSS
Riferimento HTML DOM: proprietà transitionProperty