Поворот иконки при наведении

Небольшая анимация при наведении — отличный способ добавить интерактивности и «отзывчивости» вашему интерфейсу. Один из самых простых и эффектных вариантов — поворот иконки.

Это статья из цикла заметок по CSS анимации и эффектам.

Где это типично используется

  • Иконки настроек, меню, обновления и т.п.
  • Стрелки «развернуть» в аккордеонах
  • Кнопки с иконками, указывающими на действие
  • Элементы навигации

Анимация основана на двух вещах:

  • Свойства transform: rotate и transition — поворачивают элемент и делают это плавно.
  • Псевдокласс :hover — срабатывает при наведении.

Пример, того как это выглядит (наведите курсор на иконку):

🔄

Вот пример на чистом CSS / HTML

Можно заменить 🔄 на любую SVG-иконку, например из Font Awesome или другого набора.

Стили:

Вариации

  • Можно изменить угол поворота, скорость или даже направление — например, rotate(-180deg).
  • Поворот назад при уходе курсора — по умолчанию анимация уже возвращает элемент в исходное состояние, благодаря transition.
  • Бесконечное вращение при наведении:

Мало букафф? Читайте есчо !

Анимация "Прыгающий элемент" (bounce)

Апрель 24, 2025 г.

Эффект подпрыгивания делает элемент визуально более "живым" и может привлечь внимание пользователя, особенно если использовать его на кнопке, иконке или уведомлении. Это статья из цикла заметок по CSS анимации и эффектам. Как работает bounce ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Эффект увеличения элемента при наведении

Апрель 22, 2025 г.

Здесь мы разберем CSS анимацию - увеличения элемента при наведении (:hover + scale). Это статья из цикла заметок по CSS анимации и эффектам. Одна из самых простых и популярных анимаций, она действует следующим образом: при наведении элемент ...

Читать

Анимация подчеркивания текста при наведении

Апрель 28, 2025 г.

Классический эффект: при наведении на ссылку или текст появляется анимированное подчеркивание. Вместо обычного text-decoration: underline, подчеркивание создаётся с помощью псевдоэлементов (::after или ::before) и плавно анимируется. Это выглядит современно ...

Читать
 

Комментарии к «Поворот иконки при наведении»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: