从左到右的 CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41587802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css animation from left to right
提问by Unknown Potato
I am trying to make an animation in css (first time making) I read some examples of it online and I cannot figure out what I'm doing wrong... So basicly 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 im doing wrong or how I should face this problem instead? Here is my beautiful code:
我正在尝试用 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>(sorry mos and safari and opera users) https://jsfiddle.net/oxc12av7/
（对不起 mos 和 safari 和歌剧用户） https://jsfiddle.net/oxc12av7/
回答by Julien
you have to use only the 'left' not the 'right' parameter on your keyframe. You have also some typo on your css, the 'scale' seems useless too.
您必须在关键帧上仅使用“左”而不是“右”参数。您的 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;}
}
like : online version
喜欢：网络版
回答by sunil
see the below code it working fine.in the below code when you hover on the potato it runs the image from left to right when you hover back at that time it returns to the left again.while object 3 div runs from left to right whenever you refresh the page there are 2 examples are there you can use anyone.
请参阅下面的代码，它工作正常。在下面的代码中，当您将鼠标悬停在马铃薯上时，它会从左到右运行图像，当您向后悬停时，它会再次返回左侧。而对象 3 div 则从左到右运行您刷新页面有 2 个示例，您可以使用任何人。
<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>
回答by Taig
The accepted answer has the flaw that the element is completely pushed out of the viewport during the animation. This might be desired for some use cases, but I wanted to share a cleaner solution that leverages the CSS transform: translateproperty.
接受的答案有一个缺陷，即在动画过程中元素被完全推出视口。对于某些用例，这可能是需要的，但我想分享一个利用 CSStransform: 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" />I wrote in a bit more detail about this technique here: https://medium.com/@taig/dynamically-position-and-center-an-html-element-with-css-based-on-percentage-5fea0799a589.
我在此处详细介绍了此技术：https: //medium.com/@taig/dynamically-position-and-center-an-html-element-with-css-based-on-percentage-5fea0799a589。
回答by Satyam Pathak
<!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>
Check this example, which moves a block of red div to right and then back to left
检查这个例子，它将一块红色 div 向右移动，然后再向左移动
