Animated 3D Stereo Images with CSS3 (Enhanced with Steps)

dabblet.css

/**
 * Animated 3D Stereo Images with CSS3 (Enhanced with Steps)
 * Author: Thanh Tran (int3ractive.com)
 * Blog post: http://blog.int3ractive.com/2012/05/cave-3d-stereo-images-2-state-looping.html
 * Older solution (without steps() function): http://dabblet.com/gist/2651495
 * Note: prefix-free in use
 */

.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 {
  animation: translate .3s infinite steps(1);
}

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

dabblet.html

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

dabblet.js

/* int3ractive.com */

settings.json

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