将精灵图像转换为CSS动画

Question

我有一个精灵图像，我想要动画它，下面是实际的Animation.I编码只是复制其他网站的代码。它使用一些名为motio 2.2的框架，但问题是它在IOS中不起作用。以下是示例代码，这里是演示https://codepen.io/adjmpw/pen/OmxVNO

var blue_cirlce_anim = jQuery('#' + BLUE_CIRCLE_ID);
            blue_cirlce_anim.css('cssText', 'display: block !important;');
            var motioBC = new Motio(blue_cirlce_anim[0], {
                fps: 60,
                frames: 97,
                vertical: true
            });
            motioBC.play();


https://codepen.io/adjmpw/pen/OmxVNO

我想为以下图片制作动画，使用Css或Javascript或jquery

http://www.humanverify.net/captchalocker/img/blue-circle-anim.png

http://www.humanverify.net/captchalocker/img/blue-circle-loading-anim.png

到目前为止我尝试了什么

var imgHeight = 2844;
var numImgs = 100;
var cont = 0;
var img = $('#container').find('img');

var animation = setInterval( moveSprite,100);

function moveSprite(){
    img.css('margin-top', -1 * (cont*imgHeight));

    cont++;
    if(cont == numImgs){
        clearInterval(animation);
    }
}

http://jsfiddle.net/aTqGw/406/