Tematy: transition | transition-property | transition-duration | transition-timing-function | transition-delay
| Dane w pigułce | |
| Zastosowanie | Definiuje przemianę obiektu |
| Dziedziczenie | nie |
| Wartości | własność czas-trwania rozkład-w-czasie opóźnienie |
| Wartość domyślna | all 0 ease 0 |
| Przykład | transition : width 2s |
| Składnia JavaScript | object.style.transition="width 2s" |
Aby zdefiniować przemianę, należy wpisać w definicji stylu jakąś kombinację parametrów transition:własność czas-trwania rozkład-w-czasie opóźnienie.
Żadna z przeglądarek nie obsługuje czystego kodu, Firefox wymaga prefiksu -moz-, Chrome i Safari prefiksu -webkit-, natomiast Opera - prefiksu -o-.
Konieczne jest użycie dwóch bloków kodu. Przykładowa definicja:
div.przemiana
{
width:100px;
height:100px;
transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
określa pierwotny rozmiar pojemnika oraz sposób rozszerzenia (width=szerokość) i czas jego trwania (2s). Użyliśmy tu klasy .przemiana wskazującej wybrany pojemnik.
Z kolei kod:
div.przemiana:hover
{
width:300px;
}
definiuje szerokość pojemnika po przesunięciu nad niego kursora myszy (pseudoklasa :hover).
Przesuń kursor nad pojemnik:
Prezentacja wideo dla użytkowników Firefoksa i Internet Explorera:
Analogiczny kod definiujący rozszerzenie w dół:
div.przemiana2
{
width:100px;
height:50px;
background-color: olive;
transition: height 2s;
-webkit-transition: height 2s;
-o-transition: height 2s;
}
div.przemiana2:hover
{
height:200px;
}
Prezentacja wideo dla użytkowników Firefoksa i Internet Explorera:
Interpretacja: Chrome (z prefiksem), Opera (z prefiksem), Firefox 3.x (z prefiksem, błędnie), Firefox 4, Internet Explorer 9 (błędnie)).
