从左到右的CSS动画

Question

我正在尝试在CSS中制作动画，我在网上阅读了一些示例，但无法确定我的代码哪里出现了问题...

我想让我的土豆图像从左到右移动，然后转身，再返回到左侧，但我可能在代码中弄错了什么？有什么建议或应该如何解决这个问题？

这是我的代码：

#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://istack.dev59.com/qgNyF.webp?s=328&g=1" width=100px height=100px>
</div>

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

- Unknown Potato

---

尝试使用50%{ left : 100%;}而不是50%{ right : 0;} - 这在您的fiddle中对我有效。 - Andrew

啊，它起作用了，非常感谢 @Andrew！ - Unknown Potato

我在编辑中从问题标题中删除了“[评论中已解决]”。请发布您自己的答案，接受已给出的答案或删除该问题。 - Funk Forty Niner

Answer 1

由于这个问题仍然受到很多关注，而且没有一个解决方案能够提供我想要实现的完整答案，所以我将给出一个示例，说明我几年前是如何解决的。

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

#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://istack.dev59.com/qgNyF.webp?s=328&g=1" width=100px height=100px>
</div>  

只采用这种解决方案的问题在于，土豆向右移动过远，因此在掉头之前就被视口推出了。如用户Taig所建议的那样，我们可以使用transform: translate方法，但我们也可以设置50% { left: calc(100% - potatoWidth); }来使动画从左到右运动而不被视口推出。

第二步：使动画能够从左到右运动，且不会被推出视口：

#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://istack.dev59.com/qgNyF.webp?s=328&g=1" width=100px height=100px>
</div>  

最后，我们需要让土豆在问题中实现转动。为此，我们需要改变它的y轴变换。

请注意，如果我们只让它在50%时转动，在同一时间它会缓慢地转动。所以，我们需要指定土豆在-webkit-transform: rotateY(0deg);状态下停留的时间长度。在这个例子中，土豆在动画进行到48%时才开始转动，然后在48%到50%之间转动。

第三步是让土豆在每个角落转弯，这样就不会倒退：

#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://istack.dev59.com/qgNyF.webp?s=328&g=1" width=100px height=100px>
</div>

- Unknown Potato

Answer 2

你必须在关键帧中只使用“left”而不是“right”参数。你的CSS中还有一些拼写错误，似乎“scale”也没有用。

#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%{ left : 100%;}
    100%{ left: 0;}
}

类似于: 在线版本

- Empreintes

---

使用alternate作为动画方向是多余的，而且如果使用normal作为动画方向，代码的行为将会相同，因为交替效果在关键帧定义中处理。 - SMAG

Answer 3

接受的答案存在一个缺陷，即在动画期间该元素完全被推出视口。这可能适用于某些用例，但我想分享一种更清晰的解决方案，利用CSS的transform: translate属性。

#pot {
  bottom: 15%;
  display: block;
  position: absolute;
  animation: linear infinite alternate;
  animation-name: run;
  animation-duration: 2s;
}

@-webkit-keyframes run {
    0% {
      left: 0;
      transform: translateX(0);
    }
    100% {
      left: 100%;
      transform: translateX(-100%);
    }
}

<img id="pot" src="https://istack.dev59.com/qgNyF.webp?s=328&g=1" width="100px" height="100px" />

我在这里稍微详细介绍了这种技术：https://medium.com/@taig/dynamically-position-and-center-an-html-element-with-css-based-on-percentage-5fea0799a589。

- Taig

---

你能否添加一个功能，使得推送屏幕最右侧（例如浏览器通知）的版本？ - Menai Ala Eddine - Aladdin

Answer 4

看一下下面的代码，它正常工作。在下面的代码中，当你悬停在土豆上时，它会从左侧向右侧运行图片；当你向后悬停时，它会再次返回到左侧。而对象3 div则是从左到右运行的，每当你刷新页面时，都有两个示例可供使用。

.object {
    position: absolute;
}

.van {
    top: 45%;
    left: 44%;
}

#axis:hover .move-right{
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Chrome & Safari **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
}

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

.object3 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
  /*  50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}*/
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
  /*  50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}*/
}

<html>
    <head>
    </head>
    <body>
        <div id="axis" class="one">
            <img class="object van move-right" src="https://istack.dev59.com/qgNyF.webp?s=328&g=1" width=100px height=100px>
        </div>
        <div class="object3"></div>
    </body>
</html>

- sunil

---

这太棒了！有什么办法可以让土豆循环从左到右无限循环吗？现在是从左到右；完成；从右到左；完成；...等等能否实现从左到右；完成；从左到右；完成等等？ - Pian0_M4n

Answer 5

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name :example;
    animation-duration: 4s;
    animation-iteration-count: 3
}


@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    100% {background-color:red; left:0px; top:0px;}
}


</style>
</head>
<body>

检查这个例子，它将一个红色 div 块向右移动，然后再向左移回原位。

- Satyam Pathak