Animate a Sprite grid using CSS3?

Question

I've got this sample sprite grid sheet that I need to run through and animate. I am able to reach a certain point but struggling to make it perfect. The animation is not that smooth and additionally, the image is not aligned properly. During the animation, you can see image elements not centered with other elements in the view. Here is my HTML and CSS3 code so far.

.hi {
    width: 910px;
    height: 340px;
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
    position: relative;
    -webkit-animation: playv 12s steps(6) infinite, playh 2s steps(4) infinite; 

}

@-webkit-keyframes playv {
  0% { background-position-y:   0px; }
  100% { background-position-y: 100%; }
}

@-webkit-keyframes playh {
    0% { background-position-x:   0px; }
    100% { background-position-x: 100%; }
}

<div class="hi">
</div>

Fiddle: http://jsfiddle.net/bf5ckdv9/

In mi opinion it's difficult what you are trying to achieve (if I'm right it's like an animated gif) with an sprite. If I were to do that I would split the sprite into single images same size and use a slider with automatic transition, fast "fade" effect between sliders, with no user interaction (arrows, etc). I would be easier. But it's just my 2 cents. Gl with your project — Alvaro Menéndez, Aug 29 '17 at 07:05
Please use standard CSS features by default, `animation` and `@keyframes`, not their vendor-prefixed experimental analogs. This ensures that your code will be interpreted by all modern browsers the same way. If you really need to support very old browsers that really need vendor prefixes, you can always add them automatically with tools like Autoprefixer. — Ilya Streltsyn, Aug 29 '17 at 16:51
@AlvaroMenéndez: Whats a slider? Could you point me to any example? Thanks — Vishal, Aug 30 '17 at 01:24
Slider... this one is the best imo: https://github.com/Codeinwp/Nivo-Slider-jQuery — Alvaro Menéndez, Aug 30 '17 at 06:55

score 0 · Accepted Answer · answered Aug 29 '17 at 16:38

I have added a background dimension style, and rearranged some of your properties

the result is almost ok; but your sprite grid seems to be out of order

.hi {
    width: 910px;
    height: 340px;
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
    position: relative;
    animation: playh 2s steps(5) infinite, playv 10s steps(5) infinite; 
    border: solid 1px blue;
    background-size: 500% 500%;
    background-repeat: no-repeat;
}

@keyframes playv {
     0% { background-position-y:   0px; }
   100% { background-position-y: 125%; }
}

@keyframes playh {
     0% { background-position-x:  0%; }
   100% { background-position-x: 125%; }
}

<div class="hi">
</div>

Animate a Sprite grid using CSS3?

1 Answers1