Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - transition-duration

Email Drukuj PDF

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

Dane w pigułce
Zastosowanie Określa czas przemiany pojemnika
Dziedziczenie nie
Wartości czas w sekundach lub milisekundach
Wartość domyślna 0
Przykład transition-duration: 5000ms
Składnia JavaScript object.style.transitionDuration="5000ms"

Aby zdefiniować czas przemiany pojemnika, należy wpisać w definicji stylu transition-duration:czas. 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:

div.przemiana
{
width:100px;
height:50px;
background-color: olive;
transition-property: width;
transition-duration: 5000ms;
-webkit-transition-property: width;
-webkit-transition-duration: 5000ms;
-o-transition-property: width;
-o-transition-duration: 5000ms;
-moz-transition-property: width;
-moz-transition-duration: 5000ms;
}

określa pierwotny rozmiar pojemnika oraz sposób rozszerzenia (width - szerokość) i czas jego trwania (5000ms). Użyliśmy tu klasy .przemiana wskazującej wybrany pojemnik.

Z kolei kod:

div.przemiana:hover 
{
width:500px;
}

definiuje szerokość pojemnika po przesunięciu nad niego kursora myszy (pseudoklasa :hover).

Przesuń kursor nad pojemnik:

 

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