我可以使用 CSS 转换为绝对定位元素设置动画吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24973176/
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
Can I animate absolute positioned element with CSS transition?
提问by Digital Ninja
I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on allproperties, as in the example here: http://jsfiddle.net/yFy5n/3/
我想用 CSS 过渡动画元素的位置变化，但即使我在all属性上使用过渡它也不起作用，如这里的示例所示：http: //jsfiddle.net/yFy5n/3/
However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now).
但是，我不希望我的最终解决方案将过渡应用于所有属性，而是仅应用于位置更改。所以颜色变化应该是即时的，只有从左到右的位置变化应该是动画的（与现在发生的情况相反）。
回答by Shomz
You forgot to define the default value for leftso it doesn't know how to animate.
您忘记定义默认值，left因此它不知道如何设置动画。
.test {
left: 0;
transition:left 1s linear;
}
See here: http://jsfiddle.net/shomz/yFy5n/5/
回答by Hbirjand
Please Try this code margin-left:60pxinstead of left:60px
请试试这个代码margin-left:60px而不是left:60px
please take a look: http://jsfiddle.net/hbirjand/2LtBh/2/
请看一看：http: //jsfiddle.net/hbirjand/2LtBh/2/
as @Shomz said,transition must be changed to transition:margin 1s linear;instead of transition:all 1s linear;
作为@Shomz说，过渡必须改变，以transition:margin 1s linear;代替transition:all 1s linear;
回答by qbit
try this:
尝试这个：
.test {
position:absolute;
background:blue;
width:200px;
height:200px;
top:40px;
transition:left 1s linear;
left: 0;
}
