То, что вы хотите, - это использовать спрайт, потому что вы легко можете создать спрайт в 80 кадров.
Это очень просто. Хотя вам нужен конструктор спрайтов. Я сам создал его в C# (совершенно новые топи c)
Фактический css для спрайта изображения под телом в файле css:
/*I've called my div bckgrnd*/
.bckgrnd
{
/*width and height needs to be for one image frame*/
width: 454px;
height: 512px;
margin: auto;
background: url('http://yourdomain/sprite.jpg') left center;
/*steps is the number of frames, in your case 80*/
/*infinite means it goes round forever and play 0-6s is play speed*/
animation: play 0.6s steps(80) infinite;
}
html is:
<div class="bckgrnd">
<!-- any other html you want here -->
</div>
В качестве альтернативы с помощью Javascript создайте al oop, кодируйте его жестко и воспроизводите в браузере, вызывая функцию при загрузке.
//80 frames I've done this because you can change the order in here, otherwise you could just use the loop to go 0-80, this gives you more control
var images = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "80"];
//call this function first
function imagechange()
{
//this starts a timer, I've used 30th of 1000 looks quite natural.
setInterval("animate()", 30);
}
//the timer calls the animate function every 30 milliseconds.
function animate()
{
if (k>=0)
{
document.getElementById("anim").src = "animation/(" + images[k] + ").png";
}
//images.length : this is the hard coded 0-80 above. Could just do k>= 80
if(k>= images.length-1)
{
k=0;
}
k++;
}
html
//inital load image
<body onload='imagechange();'>
<img id="anim" align="center" src="animation/load.gif" width="70%">