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>

Answer 2

只需让它在动画中翻转0％和100％即可获得所需的结果。或者您只需复制以下代码即可。

＆＃13;

    @keyframes arrow {
    0%   {left:50px; top:10px;-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}
    100% {left:250px; top:10px;-moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        filter: FlipH;
        -ms-filter: "FlipH";}
}
div.arrow {
    width: 44px;
    height: 50px;
    position: absolute;
    animation-name: arrow;
	  background-repeat: no-repeat;
    animation-duration: 3s;
  	animation-timing-function: linear;
  	animation-iteration-count: infinite;
  	animation-direction: alternate;
}

＆＃13;

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

＆＃13;

Answer 3

试试此代码

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

@keyframes arrow {
    0%   {left:50px; top:10px;}
    50%{transform: rotateX(90deg);}
    100% {left:250px; top:10px;}
}
div.arrow {
    width: 44px;
    height: 50px;
    position: absolute;
    animation-name: arrow;
      background-repeat: no-repeat;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

http://codepen.io/ankitkothari225/pen/bpgRPo

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

3 个答案: