Can I animate absolute positioned element with CSS transition?

问题

I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: 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).

回答1:

You forgot to define the default value for left so it doesn't know how to animate.

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

See here: http://jsfiddle.net/shomz/yFy5n/5/

回答2:

Please Try this code margin-left:60px instead of left:60px

please take a look: http://jsfiddle.net/hbirjand/2LtBh/2/

as @Shomz said,transition must be changed to transition:margin 1s linear; instead of transition:all 1s linear;

回答3:

try this:

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

来源：https://stackoverflow.com/questions/24973176/can-i-animate-absolute-positioned-element-with-css-transition