CSS动画从左到右 [英] CSS Animation from Left to Right

问题描述

我正在尝试使用 CSS 制作动画.我在网上阅读了一些示例，但无法弄清楚自己在做错什么...我希望我的马铃薯图像从左到右，然后转身，然后再次回到左侧，但是我可能在代码中弄乱了某些内容吗?有什么建议我做错了或者应该如何面对这个问题吗?

I am trying to make an animation in CSS. I read some examples of it online and I cannot figure out what I'm doing wrong... I want my potato image to go from left to right and then turn around and then go back to the left side again, but I probably messed up something in my code? Any suggestions what I'm doing wrong or how I should face this problem instead?

这是我的代码:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    right: 0;
  }
  100% {
    left: 0;
    , webkit-transform: scaleX(-1);
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

(抱歉，mos，野生动物园和歌剧用户) https://jsfiddle.net/oxc12av7/

(sorry mos, safari and opera users) https://jsfiddle.net/oxc12av7/

推荐答案

由于这个问题仍然引起人们的广泛关注，并且没有任何解决方案能够提供我试图实现的完整答案，因此，我将举一个例子几年前我解决了.

Since this question is still getting alot of attention and none of the soulotions yet provide the full answer that I was trying to achieve, I'll give an example how I solved it some years ago.

像许多其他问题一样，首先使动画从左到右移动:

First to make the animation go left to right, like many other questions have showed:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>  

仅此解决方案的问题是土豆向右偏远，因此在转身之前将其从视口中推出.正如Taig用户建议的那样，我们可以使用 transform:translate 解决方案，但是我们也可以只设置 50％{left:calc(100％-potatoWidth);}

The problem with only this solution is that the potato goes too far to the right so it gets pushed out from the viewport before turning around. As the user Taig suggested we can use transform: translate solution, but we can also just set 50% { left: calc(100% - potatoWidth); }

第二步使动画从左到右移动，而不会被推动从视口出来:

Second to make the animation go left to right, without getting pushed out from viewport:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% { 
    left: calc(100% - 100px); 
   }
  100% {
    left: 0;     
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>  

最后是让马铃薯转过来，我也在这个问题中要求.为此，我们需要围绕y轴更改变换.

And lastly to make potato turn around which I also asked for in the question. To do that we need to change the transform around it's y-axis.

请注意，如果我们仅将其旋转50％，它将在移动的同时缓慢地旋转.因此，我们需要指定马铃薯在 -webkit-transform上应保留多长时间:rotateY(0deg); .在此示例中，马铃薯要等到动画达到48％时才会旋转，然后才能将动画范围从48％变为50％.

Note that if we make it turn around only at 50% it will slowly turn around at the same time it's moving. So we need to specify how long the potato should be at -webkit-transform: rotateY(0deg);. In this example the potato doesn't turn until it's 48% into the animation, then it's able to turn in the span of 48% to 50%.

第三种方法是使马铃薯在每个角落都转过身，以免马铃薯向后移动:

Third to make the potato turn around in each corner so it doesn't move backwards:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    left: calc(100% - 100px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    left: 0;    
     -webkit-transform: rotateY(0deg);
  }
}

<div id="pot">
  <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

这篇关于CSS动画从左到右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！