CSS:翻译 gif 上的属性

Question

我想让我的动图向右移动，然后回到原来的位置。我已经设置了关键帧和所有内容，但我的图像仍然没有移动。任何帮助，将不胜感激。这是我的代码:

.mushroom {
  width: 300px;
  height: 300px;
  animation-name: move-right;
  animation-duration: 5s;
  transform: scaleX(-1);
}

@keyframes move-right {
  0% {
    transform: translate (0, 0);
  }
  25% {
    transform: translate (50px, 0);
  }
  50% {
    transform: translate (100px, 0);
  }
  75% {
    transform: translate (150px, 0);
  }
  100% {
    transform: translate (200px, 0);
  }
}

<div class="row">

  <div class="mushroom2">
    <img src="css/images/mush.gif" alt="orange mushroom" class="mushroom">
  </div>

</div>

Answer 1

尝试更改 left 属性。

.mushroom {
  width: 300px;
  height: 300px;
  animation: moveright 5s infinite;
  transform: scaleX(-1);
  left: 0;
  position: relative;
}

@keyframes moveright {
  0% {
    left: 0;
  }
  100% {
    left: 200px;
  }
}

<div class="row">

  <div class="mushroom2">
    <img src="css/images/mush.gif" alt="orange mushroom" class="mushroom">
  </div>

</div>