CSS动画从左到右

Question

我正在尝试在 CSS 中制作动画。我在网上阅读了一些例子，但我无法弄清楚我做错了什么……我希望我的土豆图像从左到右然后转身然后再次回到左侧，但我可能搞砸了在我的代码中添加一些东西？有什么建议我做错了什么或者我应该如何面对这个问题？

这是我的代码：

 #pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    right: 0;
  }
  100% {
    left: 0;
    , webkit-transform: scaleX(-1);
  }
}

 <div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

（对不起 mos、safari 和歌剧用户） https://jsfiddle.net/oxc12av7/

原文由 Unknown Potato 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于这个问题仍然受到很多关注，并且没有一个灵魂能提供我试图实现的完整答案，我将举一个几年前我如何解决它的例子。

首先让动画从左到右，就像许多其他问题一样：

 #pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}

 <div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

仅此解决方案的问题是马铃薯向右移动太远，因此在转身之前它会从视口中推出。正如用户 Taig 建议的那样，我们可以使用 transform: translate 解决方案，但我们也可以只设置 50% { left: calc(100% - potatoWidth); }

第二个是让动画从左到右移动，而不是从视口中推出：

 #pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 100px);
   }
  100% {
    left: 0;
  }
}

 <div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

最后让马铃薯转身，这也是我在问题中要求的。为此，我们需要更改围绕它的 y 轴的变换。

请注意，如果我们让它只在 50% 处转身，它会在移动的同时慢慢转身。所以我们需要指定马铃薯应该在 -webkit-transform: rotateY(0deg); 多长时间。在此示例中，马铃薯在 48% 进入动画时才会转动，然后它能够在 48% 到 50% 的范围内转动。

第三，使马铃薯在每个角落转身，使其不会向后移动：

 #pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    left: calc(100% - 100px);
    -webkit-transform: rotateY(180deg);
  }
  98% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    left: 0;
     -webkit-transform: rotateY(0deg);
  }
}

 <div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

原文由 Unknown Potato 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

公认的答案有一个缺陷，即在动画期间元素被完全推出视口。这对于某些用例可能是需要的，但我想分享一个利用 CSS transform: translate 属性的更简洁的解决方案。

 #pot {
  bottom: 15%;
  display: block;
  position: absolute;
  animation: linear infinite alternate;
  animation-name: run;
  animation-duration: 2s;
}

@-webkit-keyframes run {
    0% {
      left: 0;
      transform: translateX(0);
    }
    100% {
      left: 100%;
      transform: translateX(-100%);
    }
}

 <img id="pot" src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px" />

我在这里更详细地介绍了这项技术： https ://medium.com/@taig/dynamically-position-and-center-an-html-element-with-css-based-on-percentage-5fea0799a589。

原文由 Taig 发布，翻译遵循 CC BY-SA 4.0 许可协议