CSS spritelarıyla nasıl canlandırma yapılır (A veya B)?

Question

Basit temel grafikler animasyonları kullanıyorum rağmen bir telefon uygulaması (html, css ve javascript kullanarak) yazıyorum ve animasyonlar bölümünde sıkışmış kulüpler.

A) I TEMEL yol animasyon çalıştım ama 2 sorunları var:

Ben olmayabilir wich spritesheet tam ızgara olması gerekmektedir

1), aynı zamanda boş çerçeveler görüntüler, benim yok tüm sprite sayfasını tek bir sıraya dönüştürmeye gerek kalmadan nasıl atlayacağını bilmek. (Her bir çerçeveyi bir şekilde tanımlayabileceğinizi duydum ama nasıl yapılacağını gerçekten bulamıyorum, heryerde arama yaptım!)

2) Boş karelerin yanında, animasyon masaüstünde iyi görünür ancak denediğimde Mobil, bu gibi bir şey (http://jsfiddle.net/alecstheone/5pqmsd4a/4/) sanki adımlar ve hız senkronize edilmemiş gibi görünüyor. Mobil tarayıcımın içinde jsfiddle'ı çalıştırmaya çalışırsam, her şey tam olarak masaüstünde olduğu gibi görünür.

HTML:

This İlk kodudur

<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 ile animasyon çalıştı. Bu, önceki koddan daha kolay. Boş kareler görüntülenmez, ancak aynı zamanda 2 sorun (hem masaüstü hem de mobil) de vardır:

1) Animasyon dalgalı görünüyor. Sanırım, bu sadece bir noob düşüncesidir, çünkü bu, senaryo, her bir çerçevenin boyutunu hesaplamaya ve kötü bir şekilde dağılmaya çalıştığı için gerçekleşir. (genişlik ve yüksekliği ayarlasam bile). O bölümü atlamak mümkün mü?

2) Tüm görüntü oluşturma yöntemleri (arka plan, görüntü ve aynı zamanda tuval) hem arka plan büyüklüğünde, hem de sağda hesaplanır. Alt kısmında olması gereken animasyonun üst kısmında kalan bazı artıkları görebilirsiniz. Arka plan boyutunu birkaç pikselle değiştirmek mümkün mü? Her iki versiyonda da aynı spritetoları kullanıyorum, bu yüzden spritesheet yüzünden düşünmüyorum .. veya?

JS:

This İkinci kodudur

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

beni tamamen her iki şekilde A veya B çözmeye yardımcı LÜTFEN !! Şu anda 3 gün boyunca bu şeyde kalacağım ve gerçekten çok hastayım !!

Answer 1

Bu konuda gitmenin en kolay yolu (ve sadece biraz sıkıcı) tüm anahtar kareleri tek tek belirtmek olabilir. 51 kareniz varsa, her biri% 1.96 oranında.her kare başlangıç ​​için belirtin ve

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

kontrol basamaklı bir hareketin bu konuda tam bir öğretici vermek için zaman durdurun, Onun 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; 
    } 
}