使用CSS3 animation实现gif动图的暂停和播放

源自原文：张鑫旭——鑫空间

要实现gif动画的暂停播放效果有很多方法，这里只写出我比较喜欢的一种。

animation模拟gif动画。

原理就是逐帧移动背景，以达到gif的播放效果

gun.jpg如下：

gun

CSS代码部分：

/*
css部分*/
.ball{display:block;
        width:40px;
        height:40px;
	border-radius:80px;
	background:url(../images/gun.jpg) center no-repeat ;
        background-size:auto 100%;
        animation: heart-burst steps(4) 0.4s infinite both;
}
@keyframes heart-burst {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

HTML代码部分：

/*
HTML代码部分*/
<div class="ball " id="ball" style="animation-play-state: paused;"></div>
<button type="button">点我开始</button>

js代码部分：

/*
js代码部分*/
$("button").click(function(){
    $(".ball").attr("style","");
})