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

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

Синтаксис

селектор {
	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, които представляват анимация при посочване на елемент