Нескінченне обертання за допомогою 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