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

Question

我想知道是否有可能在图像执行此操作的情况下执行CSS转换：

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

到目前为止，我有这个小提琴：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>