CSS：在 gif 上翻译属性答案

【问题标题】：CSS: translate property on a gifCSS：在 gif 上翻译属性
【发布时间】：2018-07-17 09:50:06
【问题描述】：

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

.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>

【问题讨论】：

去掉translate 和值之间的空格，即translate(50px, 0); 我投票结束这个问题，因为简单的印刷错误。

标签： css css-animations keyframe

【解决方案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>

【讨论】：

非常感谢您的快速响应和帮助。使用 left 属性终于让它动起来了！
以后请尝试not to answer off-topic questions。 :)
什么是题外话！它没有标记为离题，也没有标记为重复。我没有发现它偏离主题，并且问题有 2 个赞成票。所以我想我可以回答。但是感谢您的链接，将来不会回答离题的问题。但在我看来，这个问题并没有离题！
我认为这没什么大不了的，只是提供一点信息。正如您在what's on topic (#2) 中看到的那样，由简单的印刷错误导致的问题被视为离题。由于 OP 的问题是缺少一个空格的结果，因此我将其归为该类别。但是你做你觉得是对的——只要 OP 能解决他们的问题 :)

【解决方案2】：

我认为解决方案很简单，只需在 CSS 动画中的每次转换中从 translate 和开头 ( 之间删除空格即可：

@keyframes move-right {
  0% {
    /* transform: translate (0px, 0px); - white space between translate and ( causes syntax error in your CSS */
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(100px, 0px);
  }
  75% {
    transform: translate(150px, 0px);
  }
  100% {
    transform: translate(200px, 0px);
  }
}

空白基本上会导致语法错误，导致CSS和动画解析失败。这就是您看不到任何动作/动画的原因。

希望有帮助！

【讨论】：

以后请尝试not to answer off-topic questions。 :)