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

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

Синтакса

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

Вредности

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

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

Поређење различитих вредности

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

Пример

Превуците мишем преко блока - он ће глатко променити своју ширину за 2 секунде. Како је постављена вредност ease-in, анимација ће почети полако и постепено ће се убрзавати:

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;
}

Результат:

Погледајте такође

својство transition-duration,
које задаје трајање глатког прелаза
својство transition-property,
које задаје име својства за глатки прелаз
својство transition-delay,
које задаје одложивање пре глатког прелаза
својство transition,
које је скраћеница за глатки прелаз
својство animation,
помоћу којег се може направити анимација