Css，精灵动画答案

【问题标题】：Css, sprites animationCss，精灵动画
【发布时间】：2012-02-14 08:20:45
【问题描述】：

我有 5 张 png 图像（河马做俯卧撑！），我想在网站上的鼠标悬停时制作动画。我已经设法使用精灵和 css 定位为它们设置动画，但是， a）我不知道如何在鼠标悬停/鼠标关闭时停止和启动动画，并且...... b) 它在 IE 中不起作用请帮忙 http://www.arc-bpictures.com/anim.html 谢谢

【问题讨论】：

标签： css animation sprite

【解决方案1】：

您只需将#sprite 动画规则移动到#sprite:hover。

#sprite {
    width:197px;
    height:250px;
    background:url(img/anim1.png) 0 0;
}

#sprite:hover {
    -webkit-animation-duration:1200ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:step-start;
    -webkit-animation-name:animate01;
    -moz-animation-duration:1200ms;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:step-start;
    -moz-animation-name:animate01;
}

哦，没有以-webkit- 或-moz- 开头的css 将在IE 中工作。对于 IE

【讨论】：

非常感谢。你能建议我能做些什么来让它在 IE 中工作吗？还是谢谢
恐怕不行。我的 javascript 技能还可以，但我不知道从哪里开始。
好的，没问题 - 你能帮我做点别的吗 - 我希望动画在鼠标悬停时只运行一次。如何更改代码：-webkit-animation-iteration-count:infinite;什么代替无限？谢谢
实际上我回答了我自己的问题 - 一次！再次感谢
不客气。如果您认为这是一个很好的答案，我们将不胜感激。如果您认为它回答了您的问题而不是接受它也很好；）

【解决方案2】：

我无法解决 IE css 问题，所以我将一个轻量级的 jQuery 插件放在一起，它可以完成我认为的工作。

jsFiddle

(function($)
{
    var p = {
        imgObj: false,
        timeout:1000,
        images:[0,0,0,0],
        index: -1
    }
    function next()
    {
        if(p.index >= p.images.length -2)
            p.index = 0;
        else
            p.index++;
        /*Update image source*/
        $(p.imgObj).attr("src",p.images[p.index]);
    }

    /*Sprite
      Turn an img element into an animated sprite
      - Call on html img object
      params:
        timeout = duration between changes
        images = Array of image sources
        index = Starting index for images, returns to zero if greater than image count
    */
    $.fn.sprite = function(params)
    {
        p.imgObj = this;
        if(params)
            p = $.extend(true,p, params);
        /*Initiate image iteration*/
        setInterval(next,p.timeout);     
    }

})(jQuery);

/*Example:*/
var params = {
    images:["http://www.english4today.com/i/element_test48.gif",
            "http://www.web2access.org.uk/images/oxygen_test.png",
            "https://www.uk.etsglobal.org/store/images/cache/11_UK_logo_test_ico_tests2.jpg?1212756259"]};

/*Attach plugin*/
$("#test").sprite(params);

【讨论】：

谢谢。感谢您的帮助。