在反向移动期间如何保持图像旋转？

问题描述

我有一个麻烦的效果，我想创建。我的身体在HTML文件它只是一个div与两个图像。

I'm having a trouble with the effect I want to create. My body in the HTML file it's just a div with two images.

我试图以下列方式为第一张图片提供动画：

I was trying to give animation to the first image in the following way:

• 在0％它开始在div的开始（鱼的头在右边）


• 在100％结束在结束，但在这一点，我想旋转图像并保持该效果，直到它再次达到0％。 （即，在反向运动期间鱼应指向左侧）

但它只是100％旋转，不再旋转。我不知道这是否发生，因为我不明白一些动画属性的概念。

But it just rotates in 100% and no more. I don't know if this happens because I don't understand some concept of the animation property.

这是我的所有代码：

@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 中的一切，并查看了关于动画属性，但它没有帮助我。任何建议？

I've tried everything in the @keyframes and looked into W3Schools website about animation property, but it didn't help me. Any suggestions?

推荐答案

原因：

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

The behavior that is seen is expected one based on your @keyframes and the animation-direction setting. When the animation's direction is set to alternate, the UA executes the animation from 0 to 100 for the odd numbered iterations, 100 to 0 for the even numbered iterations.

您的关键帧， transform 从 rotateY（180deg）转到 rotateY（0deg） code>在动画持续时间的1％本身，所以在奇数迭代中，你看不到任何可见的旋转（持续时间很小），它从 rotateY（180deg）（在100％）到 rotateY（0deg）（在99％），因为你不会看到任何可见旋转，

As per your keyframes, the transform goes from rotateY(180deg) to rotateY(0deg) at 1% of the animation's duration itself and so during the odd numbered iterations you don't see any visible rotation (as duration is pretty small) and it goes from rotateY(180deg) (at 100%) to rotateY(0deg) (at 99%) because of which you don't get to see any visible rotation during even numbered iterations also.

在正向写入关键帧和重复使用相同的关键帧的问题（使用 animation-direction ）是，它只能在两个状态相同时才能完成。在这种情况下，不是因为元素在向前移动期间应该处于未旋转状态，并且在反向移动期间应该具有 rotateY（180deg）。

The problem in writing keyframes for forward direction and re-using the same for the reverse (using animation-direction) is that it can be done only when the states are the same for both. In this case, it is not because the element should be in unrotated state during forward movement and should have rotateY(180deg) during the reverse movement.

解决方案：

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

For the element to be seen in its rotated state, the transform must be retained for some time. So, for your case it is better to do away with the animation-direction: alternate setting and write both the forward and reverse motions within the keyframes itself like in the below snippet.

（注意：由于我们在关键帧中同时写入正向和反向运动，因此您可能需要将 animation-duration ）。

(Note: Since we are writing both forward and reverse motions within the keyframes, you may have to double the 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>

这篇关于在反向移动期间如何保持图像旋转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！