Question

我有5个png图像（河马做俯卧撑！），我想在鼠标悬停在网站上制作动画。我设法使用精灵和CSS定位动画它们，但是， a）我不知道如何在mouseover / mouseoff上停止和启动动画...... b）它在IE中不起作用请帮忙 http://www.arc-bpictures.com/anim.html 感谢

Answer 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＆lt; 9你需要使用javascript来实现这一点（不确定IE9的动画CSS支持）。

Answer 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);

Css，精灵动画

2 个答案: