Небольшая анимация — отличный способ добавить интерактивности и «отзывчивости» вашему интерфейсу. Один из простейших и эффектных способов «оживить» сайт — это плавное вращение элемента. Чаще всего такой приём используют для логотипа, иконки загрузки или фонового декора. Анимация создаёт ощущение движения, особенно если применяется ненавязчиво.
Это статья из цикла заметок по CSS анимации и эффектам.
Что мы хотим получить
Логотип (или другой элемент) медленно и непрерывно вращается по часовой стрелке. Это может быть постоянное движение или запуск по событию (например, при наведении).
Анимация основана на двух вещах:
- Свойства
transform: rotate— поворачивают элемент. - @keyframes b animation — позволяют делать это плавно.
Пример того, как это выглядит:
Вот пример на чистом CSS / HTML
|
1 2 3 |
<div class="rotating-logo"> <img src="logo.svg" alt="Логотип"> </div> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@keyframes css-animation-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating-logo img { animation: css-animation-rotate 10s linear infinite; } |
Когда использовать
- Для иконок загрузки или фона
- На лендингах — чтобы логотип «жил»
- В декоративных элементах интерфейса
Не злоупотребляйте: постоянное вращение может отвлекать пользователя, особенно если элемент крупный или находится в центре внимания. Лучше использовать такие эффекты дозированно.
Вариации
Вращение только при наведении
|
1 2 3 4 5 6 |
.rotating-logo img { transition: transform 0.5s ease; } .rotating-logo:hover img { transform: rotate(360deg); } |
— в этом случае нет @keyframes, просто задаётся эффект вращения при hover.
Обратное вращение
|
1 2 3 4 5 6 7 8 |
@keyframes rotate-back { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } |
— вращение против часовой стрелки.