CSS, 스프라이트 애니메이션

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-가 IE에서 작동하는 것입니다로 시작하는 CSS 없음. 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);