从右向左滑动背景图像，然后从左向右返回

Question

我有这个代码，我从css调用它，它从右向左滑动。在从右到左的动画之后，我该如何把它滑回来呢？

-webkit-animation: slide 5s linear infinite;
//like to slide back right after same speed and position

@-webkit-keyframes slide {
  from {
    background-position: -60px, -20px;
  }
  to {
    background-position: -170px, -20px;
  }
}

Answer 1

替代方案

​

div {
  animation: slide 5s linear infinite;
  background-image: url(https://via.placeholder.com/50x50);
  width: 120px;
  height: 120px;
}

@keyframes slide {
  0% {
    background-position: -60px, -20px;
  }
  50% {
    background-position: -170px, -200px;
  }
  100% {
    background-position: -60px, -20px;
  }
}

<div>
</div>

​