連續播放一個精靈表

嘿，我有這個精靈表http://codepen.io/benasl/pen/yabpxo，我想在它結束後更改爲另一個，第二個結束後第一個需要重新開始，等等...我不太瞭解jQuery來完成這種結果。什麼是最好的方法來做到這一點？連續播放一個精靈表

body { 
 
    background-color: #69e4c3; 
 
} 
 
.kambarys { 
 
    background: url('http://i.imgur.com/pra08AS.jpg'); 
 
    background-repeat: no-repeat; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 380px; 
 
    height: 372px; 
 
    top: 100px; 
 
    left: 40%; 
 
    animation: convejor 3s steps(76) infinite; 
 
    
 
} 
 

 
@keyframes convejor { 
 
from { background-position: 0px; } 
 
to { background-position: -28880px; } 
 
}

<div class="kambarys kambarys-1"></div>

來源

2016-09-26 Benas Lengvinas

是第二個放置在不同的DIV？ – JoseAPL

如果第二個地方放置在不同的div中會有幫助嗎？ –

取決於你想要什麼，你會通過使用javascript來控制這個div元素，還是你更喜歡使用純CSS？ – JoseAPL

是相當複雜的實現與純CSS這個功能，因爲你要創建兩個動畫的循環。我建議使用Javascript + CSS。
所以，實際上你可以將它們結合起來，並有超過你的動畫

更多的控制看一看這個jsfiddle

$(document).ready(function() { 
 
\t setInterval(function(){ 
 
    \t $('.kambarys').toggleClass('second'); 
 
    },3000); 
 
});

body { 
 
    background-color: #69e4c3; 
 
} 
 
.kambarys { 
 
    background-image: url('https://i.imgsafe.org/a37470f198.jpg'); 
 
    background-repeat: no-repeat; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 380px; 
 
    height: 372px; 
 
    top: 100px; 
 
    left: 40%; 
 
    animation: convejor 3s steps(76) infinite; 
 
} 
 

 
.kambarys.second { 
 
    background-image: url('http://blog.teamtreehouse.com/wp-content/uploads/2014/07/monster.png'); 
 
    animation: convejor2 3s steps(10) infinite; 
 
    width: 190px; 
 
} 
 

 
@keyframes convejor { 
 
from { background-position: 0px;} 
 
to { background-position: -28880px;} 
 
} 
 

 
@keyframes convejor2 { 
 
from { background-position: 0px;} 
 
to {background-position: -1900px;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="kambarys"></div>

來源

2016-09-27 12:20:54 JoseAPL

連續播放一個精靈表

回答

相關問題