CSS анимация зависает / спотыкается

Question

У меня есть простая css анимация, вы можете посетить ее здесь (круглый круг): https://test.heraresidenzen.de/ Элемент имеет положение: исправлено. Проблема в том, что анимация зависает и спотыкается. Я добавил задержку, чтобы анимация запускалась после рендеринга страницы. Но это все еще спотыкается, когда я прокручиваю во время анимации.

.roll-in {
  animation: 2s linear 0s 1 animation;
  animation-fill-mode: both;
}

@keyframes animation {
  0% {
    transform: rotate(0deg);
    left: 110%;
  }
  100% {
    transform: rotate(-720deg);
    left: 0px;
  }
}