CSS
transizioni
Ricerca…
Sintassi
- transizione: [transizione-proprietà] [transizione-durata] [transizione-temporizzazione-funzione] [transizione-ritardo];
Parametri
| Parametro | Dettagli |
|---|---|
| transizione immobili | La specifica proprietà CSS la cui variazione di valore deve essere modificata (o) all , se tutte le proprietà di transizione devono essere trasferite. |
| durata della transizione | La durata (o il periodo) in secondi ( s ) o millisecondi ( ms ) su cui deve avvenire la transizione. |
| transizione-timing-function | Una funzione che descrive come vengono calcolati i valori intermedi durante la transizione. I valori comunemente usati sono ease , ease-in , ease-out , ease-in-out , linear , cubic-bezier() , steps() . Maggiori informazioni sulle varie funzioni di temporizzazione possono essere trovate nelle specifiche del W3C . |
| transizione ritardo | La quantità di tempo che deve trascorrere prima che la transizione possa iniziare. Può essere specificato in secondi ( s ) o millisecondi ( ms ) |
Osservazioni
Alcuni browser meno recenti supportano solo proprietà di transition prefisso del fornitore :
-
-webkit: Chrome 25-, Safari 6, Safari e Chrome per iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- per Android. -
-moz: Firefox 15-. -
-o: Opera 11.5-, Opera Mobile 12-.
Esempio:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
Stenografia di transizione
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
HTML
<div></div>
Questo esempio cambierà il colore di sfondo quando il div è sospeso sul colore di sfondo, il cambiamento durerà 1 secondo.
Transizione (longhand)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
HTML
<div></div>
- transition-property : specifica le proprietà CSS per cui l'effetto di transizione è valido. In questo caso, il div si espanderà sia orizzontalmente che verticalmente quando si librerà.
- transition-duration : specifica il tempo che una transizione impiega per completare. Nell'esempio sopra, le transizioni di altezza e larghezza impiegheranno rispettivamente 1 secondo e 500 millisecondi.
- transition-timing-function : specifica la curva di velocità dell'effetto di transizione. Un valore lineare indica che la transizione avrà la stessa velocità dall'inizio alla fine.
- transizione-ritardo : specifica la quantità di tempo necessario per attendere prima che inizi l'effetto di transizione. In questo caso, l'altezza inizierà immediatamente la transizione, mentre la larghezza attenderà 1 secondo.
cubico-Bezier
La funzione cubic-bezier è una funzione di temporizzazione della transizione che viene spesso utilizzata per transizioni personalizzate e fluide.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
La funzione richiede quattro parametri:
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
Questi parametri saranno mappati ai punti che fanno parte di una curva di Bézier :
Per CSS Bézier Curves, P0 e P3 sono sempre nello stesso punto. P0 è a (0,0) e P3 è a (1,1), il che significa che i parametri passati alla funzione cubico-bezier possono essere solo tra 0 e 1.
Se si passano parametri che non sono in questo intervallo, la funzione passerà automaticamente a una transizione linear .
Poiché cubic-bezier è la transizione più flessibile nei CSS, è possibile tradurre tutte le altre funzioni di temporizzazione della transizione in funzioni cubico-bezier:
linear : cubic-bezier(0,0,1,1)
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)
