Html Css 从左到右移动元素动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23908176/
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 Move element from left to right animated
提问by fobus
I have an element that needs to be move from left to right and right to left when I change the left, right variables.
当我更改左、右变量时，我有一个元素需要从左到右和从右到左移动。
Here is an jsfiddle example that I'm working on it. It moves left to right and right to left but there is no animation.
这是我正在研究的一个 jsfiddle 示例。它从左到右，从右到左移动，但没有动画。
What I am doing wrong?
我做错了什么？
CSS:
CSS：
div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
position:absolute;
}
div:hover
{
right:0px;
}
HTML:
HTML：
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
回答by Albzi
It's because you aren't giving the un-hovered state a rightattribute.
这是因为你没有给 un-hovered 状态一个right属性。
rightisn't set so it's trying to go from nothing to 0px. Obviously because it has nothing to go to, it just 'warps' over.
right未设置，因此它试图从无到有0px。显然，因为它没有什么可去的，它只是“扭曲”了。
If you give the unhovered state a right:90%;, it will transition how you like.
如果你给 unhovered 状态 a right:90%;，它会以你喜欢的方式转换。
Just as a side note, if you still want it to be on the very left of the page, you can use the calccss function.
顺便提一下，如果您仍然希望它位于页面的最左侧，则可以使用calccss 功能。
Example:
例子：
right: calc(100% - 100px)
^ width of div
You don't have to use leftthen.
那你就不用了left。
Also, you can't transition using leftor rightautoand will give the same 'warp' effect.
此外，您不能使用leftor 进行过渡，rightauto并且会产生相同的“扭曲”效果。
div {
width:100px;
height:100px;
background:red;
transition:2s;
-webkit-transition:2s;
-moz-transition:2s;
position:absolute;
right:calc(100% - 100px);
}
div:hover {
right:0;
}<p>
<b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.
</p>
<div></div>
<p>Hover over the red square to see the transition effect.</p>CanIUsesays that the calc()function only works on IE10+
CanIUse表示该calc()功能仅适用于IE10+
回答by AndrewWhite
Try this
尝试这个
div
{
width:100px;
height:100px;
background:red;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div:hover
{
transform: translate(3em,0);
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>回答by miksiii
You should try doing it with css3 animation. Check the code bellow:
你应该尝试用css3 animation来做。检查下面的代码：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s infinite; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation: myfirst 5s infinite;
animation-direction: alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
@keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<p><strong>Note:</strong> The animation-direction property is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Where 'div' is your animated object.
其中“div”是您的动画对象。
I hope you find this useful.
希望这个对你有帮助。
Thanks.
谢谢。
