もう1つのスプライトシートを再生する

Question

こんにちは、私はこのスプライトシートhttp://codepen.io/benasl/pen/yabpxoを持っています。私はそれが終了した後に別のものに変更したいのですが、2番目のものが終了すると、最初からもう一度やり直す必要があります。私はこの種の結果を達成するために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>

Answer 1

あなたは2つのアニメーションのループを作成するために、純粋な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>