Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - przemiana

CSS3 - transition

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V