Esempio
Passa il mouse sopra un <div> elemento, e modificare la larghezza, con un effetto di transizione liscia:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà transizione proprietà specifica il nome della proprietà CSS l'effetto di transizione è per (the transition effect will start when the specified CSS property changes) .
Tip: un effetto di transizione potrebbe tipicamente verificarsi quando un utente hover su un elemento.
Note: specificare sempre la struttura di transizione durata, altrimenti la durata è 0, e la transizione non avrà alcun effetto.
| Valore di default: | all |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.transitionProperty="width,height" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- | 10.0 | 16,0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
CSS Sintassi
transition-property: none|all|property|initial|inherit;I valori delle proprietà
| Valore | Descrizione |
|---|---|
| none | No proprietà otterrà un effetto di transizione |
| all | Valore di default. Tutte le proprietà avranno un effetto di transizione |
| property | Definisce un elenco separato da virgole di nomi di proprietà CSS l'effetto di transizione è per |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Passa il mouse sopra un <div> elemento, e modificare la larghezza e l'altezza, con un effetto di transizione liscia:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS3 Transitions
Di riferimento HTML DOM: transitionProperty property