transizioni CSS3
transizioni CSS3
CSS3, dobbiamo aggiungere un effetto che può essere convertito da uno stile all'altro tempo, senza l'uso di animazioni Flash o JavaScript. Mouse sopra i seguenti elementi:
Mouse sopra i seguenti elementi:
transizione
Supporto per il browser
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione della proprietà.
Subito dopo la -webkit- digitale, -MS- o -moz- fa a sostegno del prefisso attribuiscono primo numero di versione del browser.
| 属性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Come funziona?
CSS3 transizione è un elemento gradualmente passare da uno stile all'altro effetto.
Per ottenere questo, due cose devono essere definiti:
- Voglio aggiungere l'effetto di proprietà CSS
- Specifica la durata dell'effetto.
Esempi
attributo width applicato effetto di transizione, durata di 2 secondi:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Nota: se non sispecifica un limite di tempo, la transizione non avrà alcun effetto, in quanto il valore di default è 0.
L'effetto cambierà il valore cambia proprietà CSS specificati. Un tipico cambiamento proprietà CSS è il mouse dell'utente su un elemento:
Esempi
Disposizioni quando la sospensione puntatore del mouse (: hover) per l'elemento <div> quando:
{
width: 300px;
}
Prova »
Nota: Quando il cursore del mouse per l'elemento, cambia gradualmente il suo stile originale
Numero di modifiche
Per aggiungere più di un effetto dello stile cambiamento, aggiungere attributi separati da virgole:
Esempi
effetti larghezza, altezza, e di transizione ha aggiunto:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
Prova »
Proprietà di transizione
Nella tabella seguente sono elencate tutte le proprietà di transizione:
| proprietà | descrizione | CSS |
|---|---|---|
| transizione | proprietà scorciatoia per settare quattro proprietà di transizione in una proprietà. | 3 |
| transizione immobili | Il nome della transizione proprietà CSS si applicano le disposizioni. | 3 |
| transizione durata | Per definire il tempo di effetto di transizione dedicato. Il valore di default è 0. | 3 |
| transizione-timing-function | Curva tempo di effetto di transizione predeterminata. L'impostazione predefinita è "facilità". | 3 |
| transizione ritardo | Disposizioni quando avviare l'effetto di transizione. Il valore di default è 0. | 3 |
I due esempi seguenti impostare tutti gli attributi di transizione:
Esempi
Utilizzare tutte le proprietà di transizione in un esempio:
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
Prova »
Esempi
E esempi degli stessi effetti di transizione di cui sopra, ma utilizza le proprietà di transizione abbreviate:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Prova »