Proprietatea animation-timing-function

Proprietatea animation-timing-function stabilește viteza de schimbare (accelerația) animației. De exemplu, mai întâi încet, apoi repede, apoi încet etc.

Sintaxă

cssselector {
  animation-timing-function: valoare;
}

Valori

Valoare	Descriere
`ease`	Mai întâi încet, apoi repede, la sfârșit din nou încet.
`ease-in`	Începe încet și accelerează treptat.
`ease-out`	Începe rapid și se oprește treptat.
`ease-in-out`	Mai întâi încet, apoi repede, la sfârșit din nou încet. Se diferențiază de ease prin viteză.
`linear`	Întotdeauna aceeași viteză.
`step-start`	Nu există animație, proprietatea ia imediat valoarea finală.
`step-end`	Nu există animație, proprietatea așteaptă timpul stabilit în `animation-duraton`, apoi ia instantaneu valoarea finală.
`steps`	Valoarea proprietății se modifică prin salturi.
`cubic-bezier`	Curba Bezier care poate defini o animație arbitrară. Vezi generator de curbe Bezier.

Valoare implicită: ease.

Comparația diferitelor valori

Treceți mouse-ul peste blocurile prezentate mai jos, pentru a vedea funcționarea tuturor tipurilor de funcții de timp:

Vedeți și

proprietatea animation,
reprezentând o proprietate scurtă pentru animații
comanda @keyframes,
definind cadrele cheie ale animației
tranzițiile line transition, reprezentând o animație la trecerea mouse-ului peste element