我可以使用CSS过渡为绝对定位元素设置动画吗？

Question

我希望通过CSS转换为元素的位置更改设置动画效果，但即使我在all属性上使用转换也不起作用，如下例所示：http://jsfiddle.net/yFy5n/3/ < / p>

但是，我不希望我的最终解决方案将转换应用于所有属性，而只是改变位置。所以颜色变化应该是即时的，只有从左到右的位置变化应该是动画的（与现在发生的情况相反）。

Answer 1

您忘记定义left的默认值，因此它不知道如何制作动画。

.test {
    left: 0;
    transition:left 1s linear;
}

见这里：http://jsfiddle.net/shomz/yFy5n/5/

Answer 2

请尝试使用此代码margin-left:60px代替left:60px

请看一下：http://jsfiddle.net/hbirjand/2LtBh/2/

正如@Shomz所说，过渡必须更改为transition:margin 1s linear;而不是transition:all 1s linear;

Answer 3

试试这个：

.test {
    position:absolute;
    background:blue;
    width:200px;
    height:200px;
    top:40px;
    transition:left 1s linear;
    left: 0;
}