css – 在反向运动过程中如何保持图像旋转？

我遇到了想要创建的效果的问题.我的身体在 HTML文件中它只是一个带有两个图像的div.

我试图通过以下方式为第一张图像添加动画：

>在0％时它从div的开头开始(鱼的头在右边)
>在100％中它最终结束,但此时我想旋转图像并保持该效果,直到它再次变为0％. (也就是说,反向运动时鱼应指向左侧)

但它只是旋转100％而不是更多.我不知道是否会发生这种情况,因为我不了解动画属性的一些概念.

这是我的全部代码：

@keyframes fish01 {
  0% {
    left: 0%;
    transform: rotateY(180deg);
  }
  1% {
    transform: rotateY(0deg);
  }
  99% {
    transform: rotateY(0deg);
  }
  100% {
    left: 90%;
    transform: rotateY(180deg);
  }
}
body {
  background-color: black;
}
div {
  position: absolute;
  margin-left: 18%;
  margin-top: 3%;
  width: 800px;
  height: 500px;
  border: 5px double #ddddDD;
  border-radius: 1em 1em;
  background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg");
}
div img:nth-child(1) {
  float: left;
  position: absolute;
  margin: 0px;
  top: 20%;
  width: 100px;
  height: 50px;
  transform: scale(1.5,1.5);
  animation-name: fish01;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in;
}
div img:nth-child(2) {
  float: left;
  position: absolute;
  top: 20%;
  left: 60%;
}

<section>
  <div>
    <img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png" />
    <img src="http://www.pets4homes.co.uk/images/fish_hero.png" />
  </div>
</section>

我已经尝试了@keyframes中的所有内容并查看了关于动画属性的W3Schools website,但它对我没有帮助.有什么建议？

解决方法

原因：

根据您的@keyframes和动画方向设置,可以看到所看到的行为.当动画的方向设置为交替时,UA为奇数编号的迭代执行0到100的动画,对偶数编号的迭代执行100到0的动画.

根据你的关键帧,变换从rotateY(180deg)变为rotateY(0deg),占动画持续时间本身的1％,因此在奇数迭代期间你看不到任何可见的旋转(因为持续时间非常小)而且它从rotateY(180deg)(100％)到rotateY(0deg)(99％),因为在偶数编号的迭代过程中你也看不到任何可见的旋转.

为正向编写关键帧并为反向(使用动画方向)重新使用相关帧的问题在于,只有当两者的状态相同时才能执行此操作.在这种情况下,不是因为元件在向前运动期间应该处于未旋转状态并且在反向运动期间应该具有旋转Y(180度).

解：

对于要在其旋转状态下看到的元素,必须将变换保留一段时间.因此,对于您的情况,最好取消动画方向：交替设置并在关键帧内写下正向和反向运动,如下面的代码段所示.

(注意：由于我们在关键帧内编写正向和反向运动,因此您可能需要将动画持续时间加倍).

@keyframes fish01 {
  0% {
    left: 0%;
    transform: rotateY(0deg);
  }
  49.5% {
    left: 90%;
    transform: rotateY(0deg);
  }
  50.5% {
    left: 90%;
    transform: rotateY(180deg);
  }
  100% {
    left: 0%;
    transform: rotateY(180deg);
  }
}
body {
  background-color: black;
}
div {
  position: absolute;
  margin-left: 18%;
  margin-top: 3%;
  width: 800px;
  height: 500px;
  border: 5px double #ddddDD;
  border-radius: 1em 1em;
  background-image: url("https://i.onthe.io/vllkyt28101smv87bg.349283fe.jpg");
}
div img:nth-child(1) {
  float: left;
  position: absolute;
  margin: 0px;
  top: 20%;
  width: 100px;
  height: 50px;
  transform: scale(1.5,1.5);
  animation-name: fish01;
  animation-duration: 10s; /* double of original time */
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}
div img:nth-child(2) {
  float: left;
  position: absolute;
  top: 20%;
  left: 60%;
}

<section>
  <div>
    <img src="https://www.hyperone.com.eg/media/catalog/product/cache/4/thumbnail/9df78eab33525d08d6e5fb8d27136e95/f/i/fish_1.png" />
    <img src="http://www.pets4homes.co.uk/images/fish_hero.png" />
  </div>
</section>