transition-timing-function

Властивість transition-timing-function задає функцію розподілу часу, тобто поведінку анімації. Значення властивості задається через формулу Безьє, яка описує швидкість переходу властивості від одного значення до іншого за час, зазначений в transition-duration,

У CSS є кілька ключових слів для опису базових функцій Безьє, що часто використовуються.

Ключові слова:

ease — перехід починається повільно, швидко прискорюється, а потім знову сповільнюється в кінці.
linear — перехід має рівномірну швидкість.
ease-in — починається повільно, швидкість переходу збільшується до повного завершення переходу.
ease-out — починається швидко, уповільнюється протягом переходу.
ease-in-out — починається повільно, прискорюється, а потім знову сповільнюється.

.box {
  background-color: teal;
  transition-property: background-color;
  transition-duration: 1000ms;
  transition-timing-function: linear;
}

.box:hover {
  background-color: orange;
}

P.S.transition - Всі властивості переходу можна поєднати в одну складову властивість