Esempio
Passa il mouse sopra un <div> elemento per cambiare gradualmente la larghezza da 100px a 300px:
div
{
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà di transizione è una proprietà scorciatoia per le quattro proprietà di transizione:
transizione di proprietà, di transizione della durata, la transizione-timing-function, e la transizione di ritardo.
Note: Specificare sempre la proprietà di transizione della durata, altrimenti la durata è 0s, e la transizione non avrà alcun effetto.
| Valore di default: | all 0s ease 0s |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.transition="all 2s" 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 | 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 duration timing-function delay|initial|inherit;I valori delle proprietà
| Valore | Descrizione |
|---|---|
| transition-property | Specifica il nome della proprietà CSS l'effetto di transizione è per |
| transition-duration | Specifica il numero di secondi o millesimi di secondo l'effetto di transizione necessario per completare |
| transition-timing-function | Specifica la curva di velocità dell'effetto di transizione |
| transition-delay | Definisce quando l'effetto di transizione avrà inizio |
| 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
Quando un <input type="text"> viene messa a fuoco, a poco a poco cambiare la larghezza da 100px a 250px:
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS3 Transitions
Di riferimento HTML DOM: transition property