transition-timing-function: распределение скорости перехода
transition-timing-function задаёт, как меняется скорость перехода внутри его общей длительности.
Назначение
transition-timing-function задаёт, как меняется скорость перехода внутри его общей длительности.
Как это работает
linear поддерживает равномерное продвижение, ease и другие кривые меняют ускорение. steps создаёт дискретные шаги. Кривая не меняет конечное значение и не заменяет transition-duration.
Пример
<style>
.track{padding:16px;border:1px solid}.dot{width:24px;height:24px;background:#11694e;transition:transform .4s linear}.track:hover .dot{transform:translateX(80px)}@media(prefers-reduced-motion:reduce){.dot{transition:none}}
</style>
<div class="track"><p>Наведите указатель на область.</p><div class="dot" aria-hidden="true"></div></div>Что должно получиться
Декоративный квадрат проходит заданное расстояние с равномерным продвижением. Это демонстрация кривой скорости, а не функциональный элемент управления.
Граница применения и частая ошибка
Не используйте резкое движение там, где пользователь должен точно нажать на цель. Переход кнопки не должен уводить её из-под указателя во время попытки активации.
Самостоятельная проверка
Сравните linear и ease-in-out при одной длительности. Оставьте перемещение декоративному внутреннему элементу и проверьте режим сокращённого движения.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.