CSS 스프라이트로 애니메이트하는 방법 (A 또는 B)?

Question

나는 간단한 기본 스프라이트 시트 애니메이션을 사용하고 있지만 (html, css 및 javascript를 사용하여) phonegap 응용 프로그램을 작성 중이며 애니메이션 부분에 머물러 있습니다.

가) 나는 기본 방식으로 애니메이션을 시도했지만 나는이 문제가 :

내가이 없을 수 느릅 나무 spritesheet 전체 그리드를 해달라고 경우

1), 그것은 또한 빈 프레임을 표시하고 그렇게하지를 전체 스프라이트 시트를 하나의 행으로 변환하지 않고도이를 건너 뛰는 방법을 알고 있어야합니다. (어떻게 든 각 프레임을 정의 할 수 있다고 들었지만, 실제로 어떻게 찾지는 못했고, 나는 어디에서나 검색했습니다!)

2) 빈 프레임 옆에는 애니메이션이 바탕 화면에 잘 표시되지만 시도해 봅니다 모바일 인 경우이 단계 (http://jsfiddle.net/alecstheone/5pqmsd4a/4/)는 단계와 속도가 동기화되지 않은 것처럼 보입니다. 내 모바일 브라우저에서 jsfiddle을 실행하려고하면 모든 것이 데스크탑과 똑같이 나타납니다.

HTML :

This은 첫 번째 코드

<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) 내가 spritespin.js와 애니메이션을 시도했다. 이것은 전에 코드보다 쉬운 방법입니다. 스프라이트 시트의 모든 프레임을 계산하므로 빈 프레임이 표시되지 않지만 2 가지 문제 (바탕 화면과 모바일 모두)가 있습니다.

1) 애니메이션이 고르지 않게 보입니다. 이것은 스크립트가 각 프레임의 크기를 계산하려고 시도하기 때문에 발생하는 멍청한 생각 일 뿐이라고 생각합니다. (너비와 높이를 설정하더라도). 그 부분을 건너 뛸 수 있습니까? 모든 렌더링 방법 (배경, 이미지 및 캔버스, 모바일 및 데스크톱 모두)에서 발생합니다.

2) 배경 크기도 올바르게 계산되지 않습니다. 애니메이션의 맨 위에있는 나머지 부분을 볼 수 있습니다. 몇 픽셀로 배경 크기를 변경할 수 있습니까? 두 버전 모두에서 동일한 스프라이트 시트를 사용하므로 스프라이트 시트 때문에 생각하지 않습니다. 또는?

JS :

This 제 2 차 코드

.../*! 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' 
}); 

나를 완전히 어느 쪽이든 A 또는 B를 해결하는 데 도움 주시기 바랍니다! 나는 3 일 동안이 물건에 지금 머물고있다. 그리고 나는 그것의 정말로 아프다!!

Answer 1

글쎄, 가장 쉬운 방법은 모든 키 프레임을 하나씩 지정하는 것입니다 (조금 지루합니다). 51 프레임이 있다면 각 프레임은 1.96 % 지속됩니다.각 프레임 시작을 지정하고

@-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

확인에게 강화 운동이에 대한 완전한 튜토리얼을 제공 중지 시간은, 그것은 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; 
    } 
}