Proprietà di transizione CSS
Esempio
Passa il mouse su un elemento <div> per modificare gradualmente la larghezza da 100px a 300px:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La transition
proprietà è una proprietà abbreviata per:
- proprietà di transizione
- durata della transizione
- funzione di temporizzazione di transizione
- ritardo di transizione
Nota: specificare sempre la proprietà della durata della transizione , altrimenti la durata è 0 secondi e la transizione non avrà alcun effetto.
Valore di default: | tutti gli 0 facilitano gli 0 |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.transition="tutti i 2" |
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 | 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 duration timing-function delay|initial|inherit;
Valori di proprietà
Value | Description |
---|---|
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transition-timing-function | Specifies the speed curve of the transition effect |
transition-delay | 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 |
Altri esempi
Esempio
Quando un <input type="text"> viene messo a fuoco, cambia gradualmente la larghezza da 100px a 250px:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Pagine correlate
Tutorial CSS: Transizioni CSS
Riferimento HTML DOM: proprietà di transizione