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