Kann ich absolut positioniertes Element mit CSS-Übergang animieren?

Question

Ich möchte die Position eines Elements ändern mit CSS Übergang animieren, aber es funktioniert nicht, auch wenn ich den Übergang auf all Eigenschaften verwenden, wie in dem Beispiel hier: http://jsfiddle.net/yFy5n/3/

Allerdings möchte ich nicht meine endgültige Lösung Übergang auf alle Eigenschaften anwenden, sondern nur auf die Positionsänderung. Die Farbänderung sollte also sofort erfolgen, nur die Positionsänderung von links nach rechts sollte animiert werden (das Gegenteil von dem, was gerade passiert).

Answer 1

Sie haben vergessen, den Standardwert für left zu definieren, also weiß es nicht, wie man animiert.

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

Siehe hier: http://jsfiddle.net/shomz/yFy5n/5/

Answer 2

try this:

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

Answer 3

Bitte versuchen Sie diesen Code margin-left:60px statt left:60px

nehmen Sie bitte einen Blick: http://jsfiddle.net/hbirjand/2LtBh/2/

als @Shomz sagte, transitio n muss geändert werden in transition:margin 1s linear; anstelle von transition:all 1s linear;