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

问题描述

我正在尝试用 CSS 制作动画.我在网上阅读了一些例子，但我无法弄清楚我做错了什么......我希望我的土豆图像从左到右，然后转身，然后再次回到左侧，但我可能在我的代码中搞砸了一些东西?有什么建议我做错了什么，或者我应该如何面对这个问题?

这是我的代码:

#pot {底部:15%；位置:绝对；-webkit-animation:线性无限交替；-webkit-animation-name:运行；-webkit-animation-duration: 5s;}@-webkit-keyframes 运行 {0% {左:0；}50%{右:0；}100% {左:0；, webkit-transform: scaleX(-1);}}

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

(抱歉，mos、safari 和 opera 用户)https://jsfiddle.net/oxc12av7/

解决方案

由于这个问题仍然受到很多关注，而且没有一个灵魂提供我试图实现的完整答案，我将举例说明如何我几年前就解决了.

<块引用>

首先让动画从左到右，就像许多其他问题所显示的那样:

#pot {底部:15%；位置:绝对；-webkit-animation:线性无限；-webkit-animation-name:运行；-webkit-animation-duration: 5s;}@-webkit-keyframes 运行 {0% {左:0；}50%{左:100%；}100% {左:0；}}

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

只有这个解决方案的问题是马铃薯向右移动得太远，所以它在转身之前从视口中被推出.正如用户 Taig 建议的，我们可以使用 transform: translate 解决方案，但我们也可以设置 50% { left: calc(100% -potatoWidth);}

<块引用>

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

#pot {底部:15%；位置:绝对；-webkit-animation:线性无限；-webkit-animation-name:运行；-webkit-animation-duration: 5s;}@-webkit-keyframes 运行 {0% {左:0；}50%{左:计算(100% - 100px)；}100% {左:0；}}

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

最后让土豆翻身，我也在问题中要求.为此，我们需要更改围绕 y 轴的变换.

请注意，如果我们让它仅以 50% 的速度旋转，它将在移动的同时缓慢地旋转.所以我们需要在 -webkit-transform:rotateY(0deg); 指定土豆应该有多长.在这个例子中，土豆直到进入动画的 48% 才会转动，然后它可以在 48% 到 50% 的范围内转动.

<块引用>

第三步，让土豆在每个角落都转一圈，这样它就不会向后移动:

#pot {底部:15%；位置:绝对；-webkit-animation:线性无限；-webkit-animation-name:运行；-webkit-animation-duration: 5s;}@-webkit-keyframes 运行 {0% {左:0；}48% {-webkit-transform:rotateY(0deg);}50%{左:计算(100% - 100px)；-webkit-transform:rotateY(180deg);}98% {-webkit-transform:rotateY(180deg);}100% {左:0；-webkit-transform:rotateY(0deg);}}

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

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?

Here is my code:

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

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

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>  

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.

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