CSS3 Spin Animation

Вы правильно реализовали стили анимации, но ваша анимация не работает, поскольку вы не определили ключевые кадры для анимацию.

Для анимации CSS3 требуются ключевые кадры, определяющие начальное и конечное состояния анимации.

Чтобы устранить проблему, добавьте ключевые кадры в код CSS. Это определит, как ваш элемент будет трансформироваться во время анимации. Вот пример того, как это сделать:

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Определяет ключевой кадр, который начинает анимацию при 0 градусах и заканчивает при 360 градусах. Вы можете настроить эти значения для создания желаемого эффекта анимации.

Вот демо, иллюстрирующее решение:

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Благодаря этим изменениям ваш элемент теперь должен вращаться непрерывно. Помните: чтобы анимация CSS3 работала, вам необходимо определить как стили анимации, так и ключевые кадры анимации.