Уласцівасць transition-timing-function

Уласцівасць transition-timing-function ўстанаўлівае хуткасць змянення (паскарэнне) плаўнага пераходу transition. Напрыклад, спачатку павольна, потым хутка, потым павольна і г.д.

Сінтаксіс

селектар {
	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, то анімацыя пачнецца павольна і будзе паступова паскарацца:

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

#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,
з дапамогай якога можна зрабіць анімацыю