Својство animation-timing-function

Својство animation-timing-function поставља брзину промене (убрзање) анимације. На пример, прво полако, па брзо, па полако и тако даље.

Синтакса

cssселектор {
  animation-timing-function: вредност;
}

Вредност	Опис
`ease`	Прво полако, па брзо, на крају опет полако.
`ease-in`	Почиње полако и постепено се убрзава.
`ease-out`	Почиње брзо и постепено се зауставља.
`ease-in-out`	Прво полако, па брзо, на крају опет полако. Од ease се разликује по брзини.
`linear`	Увек иста брзина.
`step-start`	Нема анимације, својство одмах добија коначну вредност.
`step-end`	Нема анимације, својство чека време задато у `animation-duraton`, а затим тренутно добија коначну вредност.
`steps`	Вредност својства се мења у скоковима.
`cubic-bezier`	Безијерова крива, која може задати произвољну анимацију. Погледајте генератор Безијерових кривих.

Подразумевана вредност: ease.

Превуците мишем преко приказаних блокова испод, да бисте видели рад свих врста временских функција:

својство animation,
које представља скраћеницу за анимације
директиву @keyframes,
која задаје кључне кадрове анимације
глатке прелазе transition, који представљају анимацију приликом преласка миша преко елемента