Css、sprites animation

Question

私は、サイト上でmouseoverでアニメーション化したい5つのpngイメージ（hippoはプレスアップをしています！）を持っています。私はスプライトとCSSの位置を使用してそれらをアニメーション化することができましたが、 a）mouseover/mouseoffでアニメーションを停止して開始する方法がわかりません。 b）IEでは機能しません http://www.arc-bpictures.com/anim.html ありがとう

Answer 1

＃スプライトのアニメーションルールを#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 < 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);