有没有一种方法(使用CSS)在最后一步后暂停精灵动画一秒或更长时间?我尝试添加一个额外的步骤或将bg-position从80%到100%,但都无效。
.sprite {
animation: anim 2000ms steps(16) infinite;
background: url(http://i.imgur.com/9FprJ5C.png) left center no-repeat;
height: 45px;
width: 90px;
}
@keyframes anim {
0% {
background-position: 0px 0;
}
80% {
background-position: -1440px 0px;
}
100% {
background-position: -1440px 0px;
}
}
<div class="sprite"></div>