html - 如何在动画中途水平翻转图像

Question

我想知道是否可以在图像执行此操作时执行 CSS 转换:

• 从左边开始。
• 从左到右移动。
• 当它到达右手边时，水平翻转，然后再次向左移动。
• 当它到达左边时，它再次水平翻转并移动向右侧，依此类推。

到目前为止我有这个 fiddle :https://jsfiddle.net/kkn7cpqL/1/

这个:

animation-direction: alternate;

正确地来回移动图像，但我不知道如何让它到达两侧后翻转。我希望箭头始终指向它移动的方向。

如能提供任何帮助，我们将不胜感激，谢谢!

Answer 1

试试这段代码

这可能会帮助您实现您的目标。

@keyframes arrow {
  0% {
    left: 0%;
    transform: rotateY(0deg);
  }
  49% {
    transform: rotateY(0deg);
  }
  50% {
    left: 90%;
    transform: rotateY(180deg);
  }
  99% {
    transform: rotateY(180deg);
  }
  100% {
    left: 0%;
    transform: rotateY(0deg);
  }
}
div.arrow {
  width: 44px;
  height: 50px;
  position: absolute;
  animation-name: arrow;
  animation-duration: 10s;
  /* double of original time */
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<div class="arrow">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvXxGWc9lfv_WXJ3RtUb-4pBMRDYZOG4b9YXNnNkNGOsImdDnN5w" />
</div>