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

transition-timing-function: time_function;

Існують основні ключові слова, які описують різні time_functions:

• ease – Значення за замовчуванням. Ефект переходу з повільним початком, потім швидким перебігом і повільним завершенням;
• linear – Постійна швидкість протягом усього переходу;
• ease-in – Ефект переходу з повільним початком;
• ease-out – Ефект переходу з повільним завершенням;
• ease-in-out – Ефект переходу з повільним початком і завершенням, а також швидкою серединою.

Запустіть наступний приклад, щоб побачити різницю між ними. Перехід буде працювати лише при наведенні на container.

Крива Безьє четвертого порядку

Можна також використовувати функцію cubic-bezier(), щоб створити власну timing-function. Ця функція приймає чотири значення, які представляють контрольні точки кубічної кривої Безьє, що визначає форму функції часу.

Примітка

Не хвилюйтеся. Не потрібно знати математику, щоб згенерувати функцію cubic bezier як значення властивості css. Можна скористатися https://cubic-bezier.com/ для створення власних функцій.

Розглянемо наступний приклад, щоб побачити, наскільки це просто у використанні. Функцію cubic-bezier було згенеровано шляхом перетягування точок на цьому ресурсі.

У результаті ми можемо скопіювати функцію зверху до нашого файлу css.