@keyframes rolling1 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100%);
  }
  50.01% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes rolling2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}
#roller1 {
  animation: rolling1 100s linear infinite;
}
#roller2 {
  animation: rolling2 100s linear infinite;
}
#roller3 {
  animation: rolling1 100s linear infinite;
}
#roller4 {
  animation: rolling2 100s linear infinite;
}