Difference between percentage and pixel-based transform transition in Chrome

Black box is transitioning differently (jerky)

HTML

<!-- Difference between percentage and pixel-based transform transition in Chrome -->

<div class="moo">
    <div class="john">%</div>
    <div class="sarah">px</div>
</div>

CSS

.moo {
    width: 100%;
    background: #ddd;
    position: relative;
}

.moo div {
    width: 200px;
    height: 200px;
    background: black;
    position: relative;
    color: #fff;
    font-size: 40px;
    text-align: center;
    line-height: 200px;
    -webkit-transition: -webkit-transform 4s;
    transition: transform 4s;
}

.moo div.sarah {
    background: blue;
}

.moo:hover div {
    -webkit-transform: translate3d(500%,0,0);
    transform: translate3d(500%,0,0);
}

.moo:hover div.sarah {
    -webkit-transform: translate3d(1000px,0,0);
    transform: translate3d(1000px,0,0);
}