Как работает свойство transition-timing-function в CSS?

Свойство transition-timing-function в CSS описывает, как процесс анимации будет распределён во времени. learn.javascript.ru Оно устанавливает скорость изменения (ускорение) плавного перехода. code.mu

Некоторые значения свойства и их описание:

• ease. html5book.ru code.mu Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. html5book.ru
• linear. html5book.ru code.mu Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. html5book.ru
• ease-in. html5book.ru code.mu Переход начинается медленно, а затем плавно ускоряется в конце. html5book.ru
• ease-out. html5book.ru code.mu Переход начинается быстро и плавно замедляется в конце. html5book.ru
• ease-in-out. html5book.ru code.mu Переход медленно начинается и медленно заканчивается. html5book.ru
• cubic-bezier. html5book.ru code.mu Позволяет вручную установить значения от 0 до 1 для кривой ускорения. html5book.ru
• step-start. code.mu Анимации нет, свойство сразу принимает окончательное значение. code.mu
• step-end. code.mu Анимации нет, свойство ждёт время, заданное в transition-duration, а затем мгновенно принимает окончательное значение. code.mu

Если не указано свойство transition-timing-function, то по умолчанию браузер будет использовать функцию ease. doka-guide.vercel.app