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)).