css - CSS アニメーション: left:100% と translate(100%) の違い

Question

translate を使用するとパフォーマンスが向上する方法について読んだことがありますが、動作が少し異なるようleft:100%ですtranslate(100%)。つまり、オブジェクトの 100% に対して画面の 100% を移動します。

これがなぜなのかを説明できますtranslateか?

ここでデモを見ることができます: http://jsfiddle.net/32VJV/1/

.slide_1 {
    top: 0px;
    left:0%;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}
.slide_1 {
    -webkit-animation: slide 3s infinite;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0% 0%;
}
.slide_2 {
    top: 25px;
    left:0%;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}
.slide_2 {
    -webkit-animation: slide2 3s infinite;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0% 0%;
}
@-webkit-keyframes slide {
    0% {
        -webkit-transform: translate(0%);
    }
    50% {
        -webkit-transform: translate(100%);
    }
    100% {
        -webkit-transform: translate(0%);
    }
}
@-webkit-keyframes slide2 {
    0% {
        left 0%;
    }
    50% {
        left:100%;
    }
    100% {
        left:0%;
    }
}

<div style="font-size:18px;">
    <div class=""> <span class="slide_1" id="dimensions">ABC</span>  <span class="slide_2" id="dimensions">ABC</span>

    </div>
</div>