我在创建效果时遇到了问题。我在 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
和 animation-direction
设置的预期行为。当动画的方向设置为交替时,UA 执行从 0 到 100 的奇数迭代动画,从 100 到 0 的偶数迭代动画。
根据您的关键帧,变换
在动画持续时间本身的 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>
关于css - 如何在反向运动中保持图像旋转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35421939/