Animated 3D Stereo Images with CSS3

dabblet.css

/**
 * Animated 3D Stereo Images with CSS3
 * Author: Thanh Tran (int3ractive.com)
 */

.image1 {
  background: url(http://labs.int3ractive.com/javascript/effects/stereo-images/img/DSC_0192.jpg) no-repeat;
  width: 512px;  
  height: 769px;
}

.stereo-img {
  overflow: hidden;
}

.stereo-img:hover {
  -webkit-animation: translate .3s infinite linear;
  -moz-animation: translate .3s infinite linear;  
  animation: translate .3s infinite linear;
}

/* These keyframes immitate a 2-state animation. 
The 49.999% progress is trying to get as close to 
next keyframe as possible, avoiding visible 
intermediate transitions between 2 states*/
@-webkit-keyframes translate {
  0% { background-position:0 0; }
  49.999% { background-position:0 0; }
  50% {background-position:100% 0; }
  100% { background-position: 100% 0; }
}

@-moz-keyframes translate {
  0% { background-position:0 0; }
  49.999% { background-position:0 0; }
  50% {background-position:100% 0; }
  100% { background-position: 100% 0; }
}

@keyframes translate {
  0% { background-position:0 0; }
  49.999% { background-position:0 0; }
  50% {background-position:100% 0; }
  100% { background-position: 100% 0; }
}

dabblet.html

<div class="image1 stereo-img" ></div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}