Forked - Animation on Transform vs left and CSS vs JS

http://jsfiddle.net/ginpei/eVtbM/ Date.now() https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/now

by ginpei

HTML

<div id="transform-css" class="box"><code>transform</code> by CSS</div>
<div id="transform-js" class="box"><code>transform</code> by JS</div>
<div id="left-css" class="box"><code>left</code> by CSS</div>
<div id="left-js" class="box"><code>left</code> by JS</div>

CSS

.box {
    background-color: #9cf;
    font-size: 10px;
    height: 50px;
    margin: 4px;
    position: relative;
    width: 50px;
}

#transform-css {
    -ms-animation: transform-css 3s infinite linear;
    -moz-animation: transform-css 3s infinite linear;
    -webkit-animation: transform-css 3s infinite linear;
    animation: transform-css 3s infinite linear;
}
@-ms-keyframes transform-css {
    0% { -ms-transform:translateX(0); }
    100% { -ms-transform:translateX(200px); }
}
@-moz-keyframes transform-css {
    0% { -moz-transform:translateX(0); }
    100% { -moz-transform:translateX(200px); }
}
@-webkit-keyframes transform-css {
    0% { -webkit-transform:translateX(0); }
    100% { -webkit-transform:translateX(200px); }
}
@keyframes transform-css {
    0% { transform:translateX(0); }
    100% { transform:translateX(200px); }
}

#left-css {
    -ms-animation: left-css 3s infinite linear;
    -moz-animation: left-css 3s infinite linear;
    -webkit-animation: left-css 3s infinite linear;
    animation: left-css 3s infinite linear;
}
@-ms-keyframes left-css {
    0% { left:0; }
    100% { left:200px; }
}
@-moz-keyframes left-css {
    0% { left:0; }
    100% { left:200px; }
}
@-webkit-keyframes left-css {
    0% { left:0; }
    100% { left:200px; }
}
@keyframes left-css {
    0% { left:0; }
    100% { left:200px; }
}

JavaScript

var startedAt = Date.now();
var elBox1 = document.querySelector('#transform-js');
var elBox2 = document.querySelector('#left-js');

var key;
if ('MsTransform' in document.body.style) {
    key = 'MsTransform';
}
if ('MozTransform' in document.body.style) {
    key = 'MozTransform';
}
if ('WebkitTransform' in document.body.style) {
    key = 'WebkitTransform';
}
else {
    key = 'transform';
}

var raf = window.requestAnimationFrame || setTimeout;
var anim = function() {
    var left = (Date.now()-startedAt)%3000/3000 * 200;
    elBox1.style[key] = 'translateX('+left+'px)';
    elBox2.style.left = left+'px';
    raf(anim, 1);
};
anim();