Proprietatea transition-timing-function

Proprietatea transition-timing-function stabilește viteza de schimbare (accelerația) tranziției line transition. De exemplu, întâi încet, apoi rapid, apoi iar încet ș.a.m.d.

Sintaxă

cssselector {
  transition-timing-function: valoare;
}

Valori

Valoare	Descriere
`ease`	Întâi încet, apoi rapid, la sfârșit iar încet.
`ease-in`	Începe încet și accelerează treptat.
`ease-out`	Începe rapid și se oprește treptat.
`ease-in-out`	Întâi încet, apoi rapid, la sfârșit iar încet. Se deosebește 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 `transition-duraton`, apoi ia instantaneu valoarea finală.
`steps`	Valoarea proprietății se schimbă prin salturi.
`cubic-bezier`	Curba Bezier, care poate defini o animație arbitrară. Vezi generator de curbe Bezier.

Valoare implicită: ease.

Compararea diferitelor valori

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

Exemplu

Treceți mouse-ul peste bloc - acesta își va schimba lin lățimea în 2 secunde. Deoarece este stabilită valoarea ease-in, animația va începe încet și va accelera treptat:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Vezi și

proprietatea transition-duration,
care stabilește durata tranziției line
proprietatea transition-property,
care stabilește numele proprietății pentru tranziția lină
proprietatea transition-delay,
care stabilește întârzierea înainte de tranziția lină
proprietatea transition,
care este prescurtarea pentru tranziția lină
proprietatea animation,
cu ajutorul căreia se poate face animație