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://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

（对不起 mos、safari 和 opera 用户） https://jsfiddle.net/oxc12av7/

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://i.stack.imgur.com/qgNyF.png?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://i.stack.imgur.com/qgNyF.png?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://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

Answer 2

您必须在关键帧上仅使用“左”而不是“右”参数。您的 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%{ left : 100%;}
    100%{ left: 0;}
}

点赞：online version

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://i.stack.imgur.com/qgNyF.png?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。

Answer 4

请参阅下面的代码，它工作正常。在下面的代码中，当您将鼠标悬停在马铃薯上时，它会从左到右运行图像，当您将鼠标悬停时，它会再次返回到左侧。而对象 3 div 从左侧运行每当您刷新页面时，右侧有 2 个示例，您可以使用任何人。

.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://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
        </div>
        <div class="object3"></div>
    </body>
</html>

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 块向右移动，然后再向左移动