Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Kurs CSS

CSS3 - transition-property

Email Drukuj PDF

Tematy: transition | transition-property | transition-duration | transition-timing-function | transition-delay

Dane w pigułce
Zastosowanie Określa cechy włączane do przemiany w obiekcie
Dziedziczenie nie
Wartości none all cecha
Wartość domyślna all
Przykład transition-property: all
Składnia JavaScript object.style.transitionProperty="all"

Aby zdefiniować cechę przemiany pojemnika, należy wpisać w definicji stylu transition-property:własność. Zwróć uwagę, że w przeciwieństwie do zbiorczej definicji transition zachowania definiujemy tu w osobnych wierszach.

Żadna z przeglądarek nie obsługuje czystego kodu, Chrome i Safari wymagają prefiksu -webkit-, Firefox prefiksu -moz-, natomiast Opera - prefiksu -o-. Internet Explorer 9 realizuje polecenie z błędami.

Przykładowa definicja (ograniczamy się tu do wymiarów pojemnika, choć można też uwzględniać inne cechy, jak kolor tła czy obramowanie):

div.przemiana
{
width:100px;
height:100px;
background-color: olive;
transition-property: all;
transition-duration: 3s;
-webkit-transition-property: all;
-webkit-transition-duration: 3s;
-o-transition-property: all;
-o-transition-duration: 3s;
-moz-transition-property: all;
-moz-transition-duration: 3s;

}

określa pierwotny rozmiar pojemnika oraz zakres cech uwzględnianych potencjalnie w przemianie (all - wszystkie cechy) i czas jego trwania (3s). Użyliśmy tu klasy .przemiana wskazującej wybrany pojemnik.

Z kolei kod:

div.przemiana:hover 
{
width:300px;
height:200px;
}

definiuje szerokość i wysokość pojemnika po przesunięciu nad niego kursora myszy (pseudoklasa :hover) - te dwie cechy będą uwzględniane w przemianie.

Przesuń kursor nad pojemnik:

 

A gdy użyjemy kodu:

div.przemiana2:hover 
{
width:300px;
height:200px;
border:5px solid red;
background-color:khaki;
margin:20px;
}

w poniższym pojemniku przemianie będzie też ulegać obramowanie i kolor tła (cały czas w definicji zachowujemy all, czyli wszystkie własności mogą być potencjalnie włączane do modyfikacji).

 

Zwróć uwagę, że transition-property w pierwszym bloku kodu wskazuje cechy, które mogą być włączone do przemiany, natomiast w drugim bloku kodu, wyzwalającym zachowanie, określamy cechy, które zostaną zmienione - ale tylko te, które będą wymienione w transition-property będą podlegały stopniowej modyfikacji, natomiast niewymienione tam (a wymienione w wyzwalaczu) zostaną zmienione błyskawicznie.

  • Gdybyśmy w transition-property podali wartość none, czyli "żadne", wówczas wszystkie cechy podane w bloku wyzwalającym zachowanie zmieniłyby się błyskawicznie - po prostu wszystkie byłyby wykluczone ze stopniowej przemiany.
  • Gdybyśmy w transition-property podali wartość width, tylko szerokość pojemnika byłaby płynnie zmieniana, natomiast pozostałe cechy zmieniłyby się natychmiast. Użycie kilku cech wymaga podania ich z przecinkami, np. transition-property:width, height, border
  • Gdybyśmy w transition-property podali wartość all, wszystkie cechy wymienione w bloku wyzwalającym będą podlegały stopniowej przemianie.

Przykłady dla :width i :height: pokazaliśmy na stronie transition.


Interpretacja: Chrome (z prefiksem), Opera (z prefiksem), Firefox (z prefiksem), 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