爲什麼這個CSS3轉換隻能在一邊工作？

Question

我有這樣的代碼：

.wrapper { 
width: 100%; 
height: 300px; 
} 
.wrapper > div { 
width: 50%; 
height: 100%; 
position: absolute; 
z-index: 1; 
} 
.wrapper > div img { 
display: block; 
width: 600px; 
height: 600px; 
margin: 5% auto 0px auto; 
} 
.wrapper > div:hover { 
width: 100%; 
left: 0; 
z-index: 2; 
transition-property: all; 
transition-duration: .5s; 
transition-timing-function: ease; 
} 
.left { 
background: #000000; 
left: 0; 
} 
.right { 
background: #ffffff; 
right: 0; 

當你將鼠標懸停在左側它做什麼，它應該，但是當你將鼠標懸停在右側它就會發瘋，並不能正常工作，任何想法，爲什麼？

編輯：我已經掛了錯誤的jsfiddle，這裏是正確的： http://jsfiddle.net/TjJrs/

Answer 1

中刪除left: 0;：

.wrapper > div:hover { 

    width: 100%; 
    /*left: 0;*/ 
    z-index: 2; 
    transition-property: all; 
    transition-duration: .5s; 
    transition-timing-function: ease; 
} 

見DEMO