css3 模拟gif每桢,使用CSS3 animation模拟gif动画，解决部分浏览器gif图卡顿问题

前言

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

准备动画效果图

gif.png

代码

.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%;

}

}

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 = '暂停';

}

};

}