Animate CSS Background-position With Smooth Results (sub-pixel Animation)
Answer : Checkout this example: #content { height: 300px; text-align: center; font-size: 26px; color: #000; position:relative; } .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; animation-name: MOVE-BG; animation-duration: 100s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes MOVE-BG { from { transform: translateX(0); } to { transform: translateX(-187%); } } <div id="content">Foreground content <div class="bg"></div> </div> http://jsfiddle.net/5pVr4/4/ Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate. Here is an example using translate for an infinite slide animation (without prefixes): http://jsfiddle.net/brunomuller/5pVr4/504/ @-webkit-ke...