Својство 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,
со кое може да се направи анимација