如何在反向运动中保持图像旋转？

Question

我在创建效果时遇到了问题。我在 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 关于动画属性，但它对我没有帮助。有什么建议吗？

Answer 1

原因：

所看到的行为是基于您的 @keyframes 和 animation-direction 设置的预期行为。当动画的方向设置为交替时，UA 执行从 0 到 100 的奇数迭代动画，从 100 到 0 的偶数迭代。

根据您的关键帧，transform 在动画持续时间本身的 1% 处从 rotateY(180deg) 变为 rotateY(0deg)，因此在奇数迭代期间您看不到任何可见旋转（因为持续时间非常小）并且它从 rotateY(180deg)（在 100%）到 rotateY(0deg)（在 99%），因此在偶数期间你看不到任何可见旋转迭代也。

为正向编写关键帧并为反向重新使用关键帧（使用 animation-direction）的问题在于，只有当两者的状态相同时才能完成。在这种情况下，并不是因为元素在正向运动时应该处于未旋转状态，而在反向运动中应该有rotateY(180deg)。

解法：

要在旋转状态下看到元素，transform 必须保留一段时间。因此，对于您的情况，最好取消 animation-direction: alternate 设置并在关键帧本身内写入正向和反向运动，如以下代码段所示。

(注意：由于我们在关键帧内同时写入正向和反向运动，因此您可能需要加倍animation-duration)。

@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>

Answer 2

问题是您的 CSS 中有 animation-direction: alternate;。为了补偿删除它，您还需要使 img 移动到 left: 90% 在动画中的 50% 标记处，而不是 100% 标记处。

希望对您有所帮助！ :)

@keyframes fish01{
        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);
     }
}

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-timing-function: ease-in;
} 

div img:nth-child(2) {
 float: left;
 position: absolute;
 top: 20%;
 left: 60%;
}

<!DOCTYPE html>
<html lang="es">
 <head>
  <meta charset="UTF-8"/>
  <title>CSS rotate animation</title>
  <link rel="stylesheet" href="Transicion02.css"/>
 </head>
 <body>
  <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>
 </body>
</html>

如何在反向运动中保持图像旋转？

How keep the image rotated during the reverse movement?

css

css-transforms

css-animations