I'm currently working on animating the background of a full-width and full-height element using a simple CSS3 animation that steps through a sprite image.
Here's what the animation code looks like:
.play-intro{animation: play 2s steps(6);}
@keyframes play {
from { background-position: 0 0 ; }
to { background-position: -7800px 0 }
}
The problem I'm encountering is that each sprite change is visible, indicating that the animation isn't functioning correctly. I suspect this issue might be related to the background-size:cover property. Any suggestions on how to fix this?
To help illustrate the issue, I've created a fiddle: http://jsfiddle.net/QKwjM/1/
You can also view the fullscreen version of the fiddle to see the problem more clearly: http://jsfiddle.net/QKwjM/1/embedded/result/