Выбираем плавность CSS-перехода на интерактивных примерах

Элементы могут пройти одинаковое расстояние за одинаковое время, но двигаться по-разному. Функция плавности задаёт, как меняется скорость на этом пути.

В интерактивном сравнении пяти функций это видно на графиках и движущихся маркерах. У linear скорость постоянная. У ease короткий плавный старт и долгое замедление. ease-in ускоряет элемент к концу и подходит для исчезновения. ease-out замедляет его перед остановкой и подходит для появления. ease-in-out смягчает и начало, и конец движения.

Запустите демонстрации и сравните, где маркеры обгоняют друг друга. Затем попробуйте выбранную функцию в своём CSS-переходе через свойство transition-timing-function. Для разбора нужны основы CSS-переходов: длительность, задержка и выбор изменяемого свойства.

#основы #практика