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和歌剧用户） https://jsfiddle.net/oxc12av7/

Answer 1

你必须只使用＆＃39; left＆＃39;不是＆＃39;权利＆＃39;关键帧上的参数。你的css上还有一些错字，＆＃39; scale＆＃39;似乎也没用。

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

由于这个问题仍然引起人们的广泛关注，并且所有的灵魂思绪都没有提供我想要实现的完整答案，因此，我将举例说明几年前如何解决这个问题。

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

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

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

Answer 4

可接受的答案的缺陷在于，在动画过程中，元素会完全从视口中推出。在某些用例中可能需要这样做，但我想分享一个利用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 5

看下面的代码它工作得很好。在下面的代码中，当你将鼠标悬停在马铃薯上时，当你向后悬停时，它会从左向右运行图像，它会再次向左返回。而对象3 div从左边开始运行无论何时刷新页面，都有两个例子，你可以使用任何人。

<html>
<head>
<style>
.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;}*/
}
</style>
</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>

Css动画从左到右

5 个答案: