Opis:
CSS animation-timing-function Określa prędkość animacji.
CSS animation-timing-function - Przykład:
Składnia:
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
CSS animation-timing-function - Spis wartości:
| Nazwa | |
|---|---|
| linear | Określa, że animacja ma tą samą prekość wykonywania od początku do końca. |
| ease | Domyślna. Animacja rozpoczyna się szybko, potem zwalnia i przyspiesza pod koniec. |
| ease-in | Animacja ma powolny początek. |
| ease-out | Animacja ma powolny koniec. |
| ease-in-out | Animacja ma powolny początek i koniec. |
| step-start | Odpowiednik kroku początkowego (1, start). |
| step-end | Odpowiednik kroku końcowego (1, end). |
| steps(int,start|end) | Określa funkcje krokową, przyjmuje dwa parametry. Pierwszy odpowiada za ilość interwałów. Musi być liczbą dodatnią większą od 0. Drugi parametr, opcjonalny, reprezentuje początek lub koniec i określa moment, w którym animacja przyjmuje określoną wartość w czasie odtwarzania. |
| cubic-bezier(n,n,n,n) | Definiujesz własne wartosci w równaniu sześciennym - Beziera. Dopuszczalne są wartoći od 0 do 1. |
| initial | Ustawia domyślną wartość. |
| inherit | Dziedziczy wartość po rodzicu. |
Zobacz również:
animation-timing-function | animation-name | animation-play-state | animation-fill-mode | animation-direction |