Question

我正在尝试使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>

Answer 1

尝试更改左属性。

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

Answer 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和动画的解析失败。这就是为什么您看不到任何运动/动画的原因。

希望有帮助！

CSS：转换gif的属性

2 个答案: