Question

Heyo，我有这个精灵表http://codepen.io/benasl/pen/yabpxo，我希望在它结束后改为另一个，在第二个结束后第一个需要重新开始，依此类推......我不知道＃39;知道很多jquery来完成这种结果。最好的方法是什么？

＆＃13;

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; }
}

＆＃13;

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

＆＃13;

Answer 1

使用纯CSS实现此功能非常复杂，因为您要创建一个包含两个动画的循环相反，我建议使用Javascript + CSS 因此，您可以实际组合它们并更好地控制动画

看看这个jsfiddle

＆＃13;

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

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

一个接一个地播放一张精灵表

1 个答案: