GPU Animating

HTML

<div class="canvas">
    <div class="space">
        <div class="measure x"></div>
        <div class="measure y"></div>
        <div class="measure z negative"></div>
        <div class="measure z positive"></div>
        
        <div id="body">
            <div class="box swinging"></div>
        </div>
        
    </div>
</div>

CSS

#body {
    background-color: #fff;
    background-image: url("http://ginpen.com/wp-content/uploads/2013/12/bg.jpg");
    border: solid 3px #999;
    height: 300px;
    left: 50%;
    position: relative;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    top: 50%;
    width: 400px;
}
.box {
    background-color: rgba(255,255,255,.5);
    background-image: url("http://ginpen.com/wp-content/uploads/2013/12/swimming-e1386315659867.png");
    -ms-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -webkit-background-size: 50px 50px;
    background-size: 50px 50px;
    background-size: ;
    border: solid 1px #999;
    height: 50px;
    width: 50px;
}
.swinging {
    -ms-animation: swinging 2s infinite alternate linear;
    -moz-animation: swinging 2s infinite alternate linear;
    -webkit-animation: swinging 2s infinite alternate linear;
    animation: swinging 2s infinite alternate linear;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.swinging::before {
    background-color: rgba(0,0,0,.1);
    box-shadow: 0 0 9px rgba(0,0,0,.3);
    content: "";
    display: block;
    height: 100%;
    -ms-transform: translateZ(-19px);
    -moz-transform: translateZ(-19px);
    -webkit-transform: translateZ(-19px);
    transform: translateZ(-19px);
    width: 100%;
}
@-ms-keyframes swinging {
      0% { -ms-transform: translateZ(20px) translateX(0) }
    100% { -ms-transform: translateZ(20px) translateX(350px) }
}
@-moz-keyframes swinging {
      0% { -moz-transform: translateZ(20px) translateX(0) }
    100% { -moz-transform: translateZ(20px) translateX(350px) }
}
@-webkit-keyframes...

JavaScript

setInterval(function() {
  var c = document.querySelector('body').classList;
  c[c.contains('on')?'remove':'add']('on');
}, 3000);