最近项目中的竞技游戏，将会使用一些特效比较好的动图，以此来增加整个体验效果。既然是动态，那一般是以gif格式为主，如果其中的图特别多的话，将会导致整个gif的大小变大，因此想查看下相关动态效果处理下的最佳方案。

1、使用 CSS3 animation

原理通过animation控制Sprites图片的background-position值模拟gif效果
图片可以无损，还可以很轻松地控制图片动画的暂停和播放，使用的是：animation-play-state: paused;
使用animation-timing-function的阶跃函数steps()，来使用Sprites中的每个图片
eg

 <style>
        .open {
            display: block;
            width: 100px;
            height: 100px;
            background: url(./css_sprites.png) 0 0 no-repeat;
            background-size: 200%;
            animation: burst steps(2) 0.8s infinite both;
        }
    
        .stop {
            animation-play-state: paused;
        }
        @keyframes burst {
            0% {
                background-position: 0%;
            }
            100% {
                background-position: 200%;
            }
        }
    </style>
    <i id="testImg" class="open"></i>
    <p><input type="button" id="testBtn" value="暂停"></p>
    <script>
        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 = '暂停';
                    }
                };
            }
    </script>

2、使用APNG格式的图片

APNG（Animated Portable Network Graphics）是基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持。APNG 是向下兼容的，扩展名也是 .png，不支持 APNG 的解码器会表现为 PNG 的形式，即显示 APNG 的第一帧图片经过apng工具，合图后，发现图的大小并没有增加多少，但是效果还是比gif 好。

原图：