Замедлить фоновую анимацию CSS?

Question

Как мне замедлить эту анимацию и сделать ее более плавной для всех браузеров?Есть ли возможный способ?

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

<div id="animate-area"></div>

Answer 1

Просто дайте animation более длительную продолжительность.

Следующее изменяет его с 10s на 30s:

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 30s linear infinite alternate;
}

<div id="animate-area"></div>