Наведение курсора — самый частый триггер для небольших анимаций на сайте, и именно на этом простом взаимодействии легче всего почувствовать разницу между аккуратной анимацией, которая улучшает интерфейс, и избыточной, которая скорее раздражает и отвлекает.
Хорошая анимация при наведении обычно короткая — в районе двух-трёх десятых секунды. Более долгая заставляет интерфейс казаться медленным и вязким, особенно если пользователь быстро проводит курсором по нескольким элементам подряд, ожидая мгновенной реакции на каждый из них.
Лёгкое увеличение через scale, изменение цвета, появление тени — все эти эффекты работают лучше всего, когда они едва заметны и не отвлекают от содержимого. Крупные, резкие анимации при простом наведении курсора обычно воспринимаются скорее как навязчивость, чем как приятная деталь.
Важно не забывать про аналог наведения для сенсорных устройств — на телефоне и планшете hover в привычном смысле не существует, поэтому важные действия не должны полагаться только на этот псевдокласс, а должны быть доступны и через обычное нажатие, без анимации-подсказки.
Стоит анимировать не только появление эффекта при наведении, но и его исчезновение, когда курсор уходит с элемента. Если transition указан на самом элементе, а не только внутри hover, оба перехода — туда и обратно — будут одинаково плавными, без резкого возврата в исходное состояние.
Анимация при наведении на карточку или кнопку — хороший способ подсказать пользователю, что элемент интерактивен, но не единственный: цвет, курсор в виде указателя и явные визуальные признаки кликабельности работают вместе с анимацией, а не вместо неё.
Примеры аккуратных hover-эффектов и разбор типичных ошибок при их реализации собраны в статье про уважение к настройкам движения на web.dev.
