使用CSS3 animation模拟gif动画，解决部分浏览器g

前言

网页中使用gif动态图时，部分IE浏览器会出现动画不流畅的效果，体验很不好。故可以考虑使用CSS3 animation来控制动画播放，避免使用gif动态图。其实际原理为，把动态图拼接成当行排列的雪碧图，通过CSS3 animation控制雪碧图的移动速度，进而模拟gif的图片播放效果。

准备动画效果图

代码

.love {
    display: block;
    width: 100px; height: 100px;
    background: url(web_heart_animation.png) 0 0 no-repeat;
    background-size: 2900%;
    animation: heart-burst steps(28) 0.8s infinite both;
}
.stop {
    animation-play-state: paused;
}
@keyframes heart-burst {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

<i id="testImg" class="love"></i>
<p><input type="button" id="testBtn" value="暂停"></p>

var image = document.getElementById("testImg"), 
    button = document.getElementById("testBtn");
    
if (image.classList && image && button) {
    button.onclick = function() {
        if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
        } else {
            image.classList.remove('stop');
            this.value = '暂停';
        }
    };
}