transition-timing-function

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>) | cubic-bezier(<number>, <number>, <number>, <number>)

📝 Описание

Устанавливает функцию времени перехода.

Значение по умолчанию: ease

🎯 Возможные значения

  • ease — медленный старт, ускорение, медленный конец
  • linear — равномерная скорость
  • ease-in — медленный старт
  • ease-out — медленный конец
  • ease-in-out — медленный старт и конец
  • cubic-bezier() — кастомная кривая Безье
  • steps() — пошаговая анимация
.element {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

🌐 Поддержка браузеров

Все современные браузеры