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从rotateY(180deg)变为rotateY(0deg)，占动画持续时间本身的1％，所以在奇数编号的迭代期间，您不会＃39} ;看到任何可见的旋转（因为持续时间非常小），它从rotateY(180deg)（100％）变为rotateY(0deg)（99％）因为你不能看到偶数迭代期间的任何可见旋转。

为正向编写关键帧并为反向重复使用关键帧（使用animation-direction）的问题在于，只有当两者的状态相同时才能执行此操作。在这种情况下，不是因为元素在向前移动时应处于未旋转状态，并且在反向移动期间应该rotateY(180deg)。

<强>解决方案：

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

（注意：由于我们在关键帧中编写正向和反向动作，您可能需要将animation-duration加倍。

＆＃13;

@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%;
}

＆＃13;

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

＆＃13;

Answer 2

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

希望这有帮助！：）

＆＃13;

@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%;
}

＆＃13;

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

＆＃13;

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

2 个答案: