Con le proprietà css di transizione è possibile attribuire ad un elemento diversi valori, quello iniziale e quello finale, determinare la durata temporale, della transizione stessa, ed indicarne la modalità di innesco attraverso le pseudo-classi.
Questo è possibile attraverso l'utilizzo delle seguenti proprietà:
| transition-property | indica la proprietà o le proprietà che dovra subire la transizione |
| transition-duration | indicare la durata temporale della transizione |
| transition-delay | impostre un ritardo alla partenza della transizione |
| transition-timing-function | effetti di transizione |
La prima proprietà serve ad impostare la o le proprietà che dovranno subire la transizione la seconda ad indicare la durata temporale di transizione
div {
width: 200px;
height: 200px;
background-color: 98d925#;
transition-property: background-color;
transition-duration: 2s;
}
div:hover {
background-color: #ff5c00;
}
div {
width: 400px;
height: 400px;
background: blu;
transition-property: background, width; /* Abbiamo indicato di applicare la transizione su due proprietà background e width separate dal segno ","*/
transition-duration: 3s;
}
div:hover {
background-color: red;
width: 600px;
}
È possibile assegnare una durata e/o un valore di ritardo ad ogni singola proprietà indipendente dalle altre
div {
transition-property: background, width, height;
transition-duration: 5s, 10s, 2s;
transition-delay: 0s, 0s, 4s;
}
Con questa proprietà è possibile impostare un ritardo all'esecuzione effettiva della transizione
div {
width: 400px;
height: 400px;
background: blu;
transition-property: background, width;
transition-duration: 3s;
transition-delay: 5s; /* Ritardiamo la partenza di 5 secondi*/
}
div:hover {
background-color: red;
width: 600px;
}
Questa proprietà definisce la ripartizione del tempo, ovvero, anziché utilizzare una ripartizione lineare del tempo è possibile utilizzare delle funzioni, attivabili dai valori possibili della proprietà, che ne cambiano la velocità di transizione generando dei veri e propri "effetti" ( basati sulla Curva di Bèzier )
Note: il tempo di transizione totale rimane il medesimo per tutte le funzioni/effetti
Valori possibili:
| ease |
| linear |
| ease-in |
| ease-out |
| ease-in-out |
| cubic-bezier |
Note: Con il valore cubic-beizer è possibile realizzare funzioni/effetti personalizzati transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); - Divisione del tempo di transizione -
div {
..
...
transition-timing-function: ease-in; }
Le transizioni non sono supportate nativamente dalla totalità dei browser ma ognuno fornisce la sua alternativa proprietaria che consente di incominciare ad utilizzare tali proprietà
div {
width: 400px;
height: 400px;
background: blu;
transition-property: background-color; /*PROPRIETA' STANDARD*/
transition-duration: 2s;
-webkit-transition-property: background-color; /*SAFARI E CHROME*/
-webkit-transition-duration: 2s;
-o-transition-property: background-color; /*OPERA*/
-o-transition-duration: 2s;
-moz-transition-property: background-color; /*FIREFOX*/
-moz-transition-duration: 2s;
}
div:hover {
background: red;
}