Css，精靈動畫

Question

我有5個PNG圖像（hippo做新聞！），我想動畫鼠標懸停在網站上。我設法使用sprite和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; 
} 

哦，沒有的CSS與-webkit-或-moz-會在IE工作的開始。對於IE < 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);