Небольшая анимация при наведении — отличный способ добавить интерактивности и «отзывчивости» вашему интерфейсу. Один из самых простых и эффектных вариантов — поворот иконки.
Это статья из цикла заметок по CSS анимации и эффектам.
Где это типично используется
- Иконки настроек, меню, обновления и т.п.
- Стрелки «развернуть» в аккордеонах
- Кнопки с иконками, указывающими на действие
- Элементы навигации
Анимация основана на двух вещах:
- Свойства
transform: rotateиtransition— поворачивают элемент и делают это плавно. - Псевдокласс
:hover— срабатывает при наведении.
Пример, того как это выглядит (наведите курсор на иконку):
🔄
Вот пример на чистом CSS / HTML
|
1 2 3 |
<button class="rotate-on-hover"> <span class="icon">🔄</span> </button> |
Можно заменить 🔄 на любую SVG-иконку, например из Font Awesome или другого набора.
Стили:
|
1 2 3 4 5 6 7 8 |
.rotate-on-hover .icon { display: inline-block; transition: transform 0.3s ease; } .rotate-on-hover:hover .icon { transform: rotate(90deg); } |
Вариации
- Можно изменить угол поворота, скорость или даже направление — например,
rotate(-180deg). - Поворот назад при уходе курсора — по умолчанию анимация уже возвращает элемент в исходное состояние, благодаря
transition. - Бесконечное вращение при наведении:
|
1 2 3 4 5 6 7 8 |
.rotate-on-hover:hover .icon { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } |