html - この 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

Remove left: 0; in:

.wrapper > div:hover {

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

See DEMO