Нескінченне обертання за допомогою CSS анімації

CSS-анімація дозволяє створювати широкий спектр візуально привабливих ефектів без використання JavaScript. Завдяки сучасним функціям CSS розробники можуть реалізовувати плавні переходи, складні ефекти руху та навіть напрочуд просунуті анімації, що покращують загальний користувацький досвід.

Один простий, але ефективний метод – створення елемента, що нескінченно обертається. Такий вид анімації можна використовувати для привернення уваги до певних частин сторінки, таких як значки, завантажувачі або інтерактивні елементи. Його часто використовують в дизайні інтерфейсу користувача для позначення поточних процесів або додавання тонкого динамічного штриха до статичного контенту.

Реалізація безперервного обертання за допомогою CSS досить проста. Використовуючи анімацію ключових кадрів та застосовуючи перетворення обертання, ви можете змусити елемент обертатися нескінченно за годинниковою стрілкою. Швидкість, час та плавність анімації можна легко налаштувати відповідно до дизайну вашого веб-сайту.

У цьому прикладі ми створимо просту анімацію нескінченного обертання, використовуючи чистий CSS. Такий підхід робить рішення легким, ефективним та простим в інтеграції в будь-який проект без додаткових залежностей.

CSS

.rotate-clockwise {
  animation-name: clockwise;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Клас CSS .rotate-clockwise можна записати в один рядок.

.rotate-clockwise {
  animation: 3s linear infinite clockwise;
}

Якщо потрібно обертати проти годинникової стрілки, то це теж легко зробити.

CSS

.rotate-counterclockwise {
  animation-name: counterclockwise;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes counterclockwise {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

Приклад робочого коду ви можете побачити на Codepen: https://codepen.io/igorrybalko/pen/XJrLRvg