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

删除 left: 0; in:

.wrapper > div:hover {

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

参见 DEMO