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 - Всі властивості переходу можна поєднати в одну складову властивість