How to animate using CSS sprites anyway (A or B)?

Question

I am writing a phonegap application (using html, css and javascript) and I am stuck in the animation part, although I use simple basic spritesheet animations.

A) I tried to animate BASIC, but I have two problems:

1) If I don’t have a full sprite in the grid, which I may not have, it also displays empty frames, and I don’t know how to skip them, I don’t need to convert the whole sprite to one line. (I heard that you can somehow define each frame, but I really can’t find how to do it, I searched everywhere!)

2) In addition to empty frames, the animation displays well on the desktop, but when I try it on a mobile device, it looks something like this ( http://jsfiddle.net/alecstheone/5pqmsd4a/4/ ), as if the steps and speed are not synchronized . If I try to run jsfiddle inside my mobile browser, everything will display exactly the same as on the desktop.

This is the first code:

HTML:

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

CSS

 .hi { width: 389px; height: 238px; background-image: url("http://i.imgur.com/XOmx2Mm.png"); position: relative; border: solid 1px black; -webkit-animation: playv 1.2s steps(6) infinite, playh 0.2s steps(9) infinite; } #container { } /* .hi:before { content: ""; position: absolute; width: 176px; height: 108px; left: 0px; top: 0px; border: solid 1px red; -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(9) infinite; } */ @-webkit-keyframes playv { 0% { background-position-y: 0px; } 100% { background-position-y: -1429px; } } @-webkit-keyframes playh { 0% { background-position-x: 0px; } 100% { background-position-x: -3500px; } } 

B) I tried to animate with spritespin.js. It is much easier than before. It calculates all the frames in the spritesheet, so empty frames are not displayed, but it also has two problems (both on the desktop and on the mobile device):

1) The animation looks volatile. I think this is just the thought that this is happening, because the script is trying to calculate the size of each frame and it will go badly. (even if I set the width and height). Can I skip this part? This happens in all rendering methods (background, image, and also canvas, both on mobile and on the desktop).

2) The background size is not calculated correctly. You can see some leftovers at the top of the animation, which should have been at the bottom. Can I resize the background to a few pixels? I use the same sprites in both versions, so I don’t think it is because of the sprite .. or?

This is the second code:

JS:

 .../*! SpriteSpin - v3.1.5 * Copyright (c) 2014 ; Licensed */... $(".hi").spritespin({ source: "http://i.imgur.com/XOmx2Mm.png", // path to sprite sheet width: 390, // width in pixels of the window/frame height: 239, // height in pixels of the window/frame frames: 51, // total number of frames framesX: 9, // number of frames in one row inside the spritesheet frameTime: 60, renderer: 'image' }); 

PLEASE help me solve any way A or B completely! I have been staying on this thing for 3 days, and I'm really tired of it!

Answer 1

Well, maybe the easiest way to do this (and just a little boring) is to specify all key frames one by one. if you have 51 frames, each of them is 1.96%. Indicate the start and stop times for each frame to give a step motion.

 @-webkit-keyframes playv { 0%, 1.96% { background-position: 0px 0px; } 1.96%, 3.92% { background-position: 50px 0px; } 3.92%, 5.88% { background-position: 100px 0px; } } 

Answer 2

Check out the complete guide on this subject, showing how to create a Dropbox homepage such as animation, https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb

 .animatedDiv { width: 820px; height: 312px; background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg"); -webkit-animation: play 2s steps(48) infinite; -moz-animation: play 2s steps(48) infinite; -ms-animation: play 2s steps(48) infinite; -o-animation: play 2s steps(48) infinite; animation: play 2s steps(48) infinite; } @-webkit-keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } @-moz-keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } @-ms-keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } @-o-keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } @keyframes play { from { background-position: 0px; } to { background-position: -39360px; } }