Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - transition-timing-function

Email Drukuj PDF

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

Dane w pigułce
Zastosowanie Określa rozkład czasowy przemiany pojemnika
Dziedziczenie nie
Wartości linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier
Wartość domyślna ease
Przykład transition-timing-function: ease
Składnia JavaScript object.style.transitionTimingFunction="ease"

Aby zdefiniować rozkład czasowy przemiany pojemnika, należy wpisać w definicji stylu transition-timing-function:wartość.

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

Znaczenie wartości:

  • linear: jednakowa szybkość rozszerzania
  • ease: wolno-szybko-wolno - odpowiednik cubic-bezier (0.25,0.1,0.25,1)
  • ease-in: wolno-normalnie - odpowiednik cubic-bezier (0.42,0,1,1))
  • ease-out: normalnie-wolno - odpowiednik cubic-bezier (0,0,0.58,1)
  • ease-in-out: wolno-normalnie-wolno - odpowiednik cubic-bezier (0.42,0,0.58,1)
  • cubic-bezier(n,n,n,n): samodzielnie zdefiniowana szybkość, wartości z przedziału [0-1]

Przykładowa definicja:

div.przemianalinear
{
width:100px;
height:50px;
background-color: olive;
transition-property: width;
transition-duration: 3000ms;
transition-timing-function: linear;
-webkit-transition-property: width;
-webkit-transition-duration: 3000ms;
-webkit-transition-timing-function: linear;
-o-transition-property: width;
-o-transition-duration: 3000ms;
-o-transition-timing-function: linear;
-moz-transition-property: width;
-moz-transition-duration: 3000ms;
-moz-transition-timing-function: linear;

}

określa pierwotny rozmiar pojemnika oraz sposób rozszerzenia, czas jego trwania (3000ms) i rozkład czasowy (linear). Użyliśmy tu klasy .przemianalinear wskazującej wybrany pojemnik.

Z kolei kod:

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

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

Zachowanie pojemnika z funkcją linear.

 

Zachowanie pojemnika z funkcją ease.

 

Zachowanie pojemnika z funkcją ease-out.

 

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