屏幕上的CSS动画并返回

Question

我只想在屏幕上移动我的元素并返回起点。 这是位置绝对要素。父包装的宽度比100％宽

我使用关键帧尝试过这种方式

.wrapper{
  position: absolute;
  width: 100%;
}

.moving-van{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: 18%;
  animation: moveBus 9s ease-in-out forwards;
}

@keyframes moveBus{
  0% {
  transform: translateX(0);
  }
  100% {
  transform: translateX(100%);
  }
}

<div class="wrapper">
  <div class="moving-van">
    <img src="https://image.ibb.co/dGA6Yo/tires_1.jpg">
  </div>
</div>

但是我不知道它将如何跨屏幕移动并成为起点。有想法吗？

Answer 1

If "come start point" means appearing from another window edge so here is an example:

html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;
}

.wrapper{
  position: absolute;
  width: 100%;
}

.moving-van{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: 18%;
  animation: moveBus 9s ease-in-out forwards;
}

.moving-van2{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: -10%;
  animation: moveBus2 4s ease-in-out 5.5s forwards;
}

@keyframes moveBus{
  0% {
  left: 18%;
  }
  100% {
  left: 110%;
  }
}

@keyframes moveBus2{
  0% {
  left: -10%;
  }
  100% {
  left: 18%;
  }
}

<div class="wrapper">
  <div class="moving-van">
    <img src="https://image.ibb.co/dGA6Yo/tires_1.jpg">
  </div>
  <div class="moving-van2">
    <img src="https://image.ibb.co/dGA6Yo/tires_1.jpg">
  </div>
</div>

Answer 2

You can do like this using transform or left:

.wrapper{
  position: absolute;
  width: 100%;
}

.moving-van{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: 18%;
  animation: moveBus 9s ease-in-out forwards;
}

@keyframes moveBus{
  0% { 
   transform: translateX(0);
   //left: 0;
  }
  50% {
   transform: translateX(100%);
   //left : 100%;
  }
  100% {
   transform: translateX(0%);
   //left: 0;
  }
}

<div class="wrapper">
  <div class="moving-van">
    <img src="https://image.ibb.co/dGA6Yo/tires_1.jpg">
  </div>
</div>