Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - animation-timing-function

Email Drukuj PDF

Tematy: animation | @keyframes | animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state

Dane w pigułce
Zastosowanie Określa czasowy rozkład animacji
Dziedziczenie nie
Wartości linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n}
Wartość domyślna ease
Przykład animation-timing-function: linear;
Składnia JavaScript object.style.animationTimingFunction="linear"

Aby zdefiniować czasowy rozkład animacji, należy wpisać w definicji stylu animation-timing-function: funkcja.

Żadna z przeglądarek nie obsługuje czystego kodu, Chrome i Safari wymagają prefiksu -webkit-.

Rozkład czasowy możemy podawać w zbiorczej definicji animacji lub też w postaci oddzielnego wiersza kodu.

animation-timing-function: funkcja

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]

Pięć obiektów, z predefiniowanymi rozkładami:

linear


ease


ease-in


ease-out


ease-in-out



Interpretacja: Chrome i Safari (z prefiksem).

 

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