用jquery循环sprite表动画

Question

我一直遇到循环精灵表动画的问题，这些动画正在互相播放。也许有人可能知道该怎么做。 http://codepen.io/benasl/pen/yabpxo

setTimeout(function() {
$(".kambarys2").css('display', 'block');
}, 3100);   
setTimeout(function() {
$(".kambarys3").css('display', 'block');
}, 6100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
<div class="kambarys2"></div>
<div class="kambarys3"></div>


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;
}
}
.kambarys2 {
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
width: 380px;
height: 372px;
top: 108px;
left: 40%;
animation: convejor 3s steps(76) infinite;
display: none;
}
.kambarys3 {
background: url('http://i.imgur.com/F6bNA00.jpg');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
width: 380px;
height: 372px;
top: 108px;
left: 40%;
animation: convejor 3s steps(76) infinite;
display: none;

现有的jquery可能有问题