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